import { useRef, useEffect } from "react"
import type { ComponentType } from "react"
import { motion, useMotionValue, useTransform, useSpring } from "framer-motion"

export function withFollowCursor(Component): ComponentType {
    return (props) => {
        const boundary = 1000

        const x = useMotionValue(0)
        const y = useMotionValue(0)

        const limitedX = useTransform(x, (value) =>
            Math.min(Math.max(value, -boundary / 2), boundary / 2)
        )
        const limitedY = useTransform(y, (value) =>
            Math.min(Math.max(value, -boundary / 2), boundary / 2)
        )

        const animatedX = useSpring(limitedX, { stiffness: 300, damping: 30 })
        const animatedY = useSpring(limitedY, { stiffness: 300, damping: 30 })

        const handleMouseMove = (event) => {
            const rect = event.currentTarget.getBoundingClientRect()
            const mouseX = event.clientX - rect.left - rect.width / 2
            const mouseY = event.clientY - rect.top - rect.height / 2

            if (
                mouseX >= -boundary / 2 &&
                mouseX <= boundary / 2 &&
                mouseY >= -boundary / 2 &&
                mouseY <= boundary / 2
            ) {
                x.set(mouseX)
                y.set(mouseY)
            } else {
                x.set(0)
                y.set(0)
            }
        }

        const handleMouseLeave = () => {
            x.set(0)
            y.set(0)
        }

        return (
            <Component
                {...props}
                as={motion.div}
                style={{
                    ...props.style,
                    x: animatedX,
                    y: animatedY,
                }}
                onMouseMove={handleMouseMove}
                onMouseLeave={handleMouseLeave}
            />
        )
    }
}