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

export function FakeOverride(Component): ComponentType {
    return (props) => {
        // Create motion values for the mouse position (x and y)
        const x = useMotionValue(0.5)
        const y = useMotionValue(0.5)

        // Calculate rotation values based on the mouse position
        const rotateX = useTransform(y, [0, 1], [30, -30])
        const rotateY = useTransform(x, [0, 1], [-30, 30])

        // Apply a smooth spring animation to the rotation values
        const animatedRotateX = useSpring(rotateX, {
            stiffness: 300,
            damping: 30,
        })
        const animatedRotateY = useSpring(rotateY, {
            stiffness: 300,
            damping: 30,
        })

        // Update the motion values on mouse move
        const handleMouseMove = (event) => {
            const rect = event.currentTarget.getBoundingClientRect()
            const mouseX = event.clientX - rect.left
            const mouseY = event.clientY - rect.top

            x.set(mouseX / rect.width)
            y.set(mouseY / rect.height)
        }

        return (
            <Component
                {...props}
                as={motion.div}
                style={{
                    ...props.style,
                    rotateX: animatedRotateX,
                    rotateY: animatedRotateY,
                    transformOrigin: "center",
                }}
                onMouseMove={handleMouseMove}
                onMouseLeave={() => {
                    x.set(0.5)
                    y.set(0.5)
                }}
            />
        )
    }