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

export const withFixedRotation = (Component: ComponentType): ComponentType => {
    const rotationAngle = 180 // This is the constant for the rotation angle
    const speed = 0.3 // This is the constant for the animation speed

    return (props) => {
        const [angle, setAngle] = useState(0)

        return (
            <motion.div
                {...props}
                animate={{
                    rotate: angle,
                    transition: { ease: "easeOut", duration: speed },
                }}
                onMouseEnter={() =>
                    setAngle((prevAngle) => prevAngle + rotationAngle)
                }
            >
                <Component {...props} />
            </motion.div>
        )
    }
}