import { motion, useAnimation } from "framer-motion"
import React, { useEffect } from "react"
import type { ComponentType } from "react"

export function withBounce(Component): ComponentType {
    return (props) => {
        const controls = useAnimation()

        const maxHeight = -122 // max jump height

        useEffect(() => {
            controls.start({
                y: [
                    0,
                    maxHeight,
                    0,
                    maxHeight * 0.38,
                    0,
                    maxHeight * 0.13,
                    0,
                    maxHeight * 0.04,
                    0,
                ],
                transition: {
                    duration: 1.5,
                    times: [0, 0.3, 0.47, 0.6, 0.73, 0.82, 0.89, 0.94, 1],
                    ease: "easeIn",
                    repeat: Infinity,
                    repeatDelay: 2,
                },
            })
        }, [controls])

        return <Component {...props} as={motion.div} animate={controls} />
    }
}