// Apply to frames only, not images

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

export function with3DTilt(Component): ComponentType {
    return (props) => {
        const x = useMotionValue(0.5)
        const y = useMotionValue(0.5)

        const rotateX = useTransform(y, [0, 1], [30, -30])
        const rotateY = useTransform(x, [0, 1], [-30, 30])

        const animatedRotateX = useSpring(rotateX, {
            stiffness: 300,
            damping: 30,
        })
        const animatedRotateY = useSpring(rotateY, {
            stiffness: 300,
            damping: 30,
        })

        const handleMove = (event) => {
            const rect = event.currentTarget.getBoundingClientRect()
            // Adjusted to work with both mouse and touch events
            const clientX = event.clientX || event.touches[0].clientX
            const clientY = event.clientY || event.touches[0].clientY
            const mouseX = clientX - rect.left
            const mouseY = 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={handleMove}
                onTouchMove={handleMove}
                onMouseLeave={() => {
                    x.set(0.5)
                    y.set(0.5)
                }}
                onTouchEnd={() => {
                    x.set(0.5)
                    y.set(0.5)
                }}
            />
        )
    }
}