import type { ComponentType } from "react"
import { motion } from "framer-motion"

const hover3DEffectVariants = {
    initial: {
        scale: 1,
        rotateX: 0,
        rotateY: 0,
        x: 0,
        y: 0,
        boxShadow: "0px 0px 0px rgba(0, 0, 0, 0)",
    },
    hover: {
        // Change scale
        scale: 1.1,
        // Change rotation
        rotateX: -10,
        rotateY: 10,
        x: "-10px",
        y: "-10px",
        boxShadow: "10px 10px 20px rgba(0, 0, 0, 0.15)", // Change the shadow color here
    },
}

export function with3DEffectOnHover(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                as={motion.div}
                initial="initial"
                whileHover="hover"
                variants={hover3DEffectVariants}
                transition={{ type: "spring", stiffness: 300, damping: 30 }}
                style={{
                    ...props.style,
                    transformOrigin: "center",
                    perspective: "500px",
                }}
            />
        )
    }
}