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

export const withHover = (Component: ComponentType): ComponentType => {
    return (props) => {
        const [angle, setAngle] = useState(0)

        const randomRotation = () => {
            const degree = Math.floor(Math.random() * 21) + 5
            const sign = Math.random() < 0.5 ? -1 : 1
            return degree * sign
        }

        return (
            <Component
                {...props}
                whileHover={{ rotate: angle }}
                onMouseEnter={() => setAngle(randomRotation())}
            />
        )
    }
}

export const onPageLoad = (Component: ComponentType): ComponentType => {
    return (props) => {
        const randomRotation = () => {
            const degree = Math.floor(Math.random() * 10) // Now the rotation can be from 0 to 360
            const sign = Math.random() < 0.5 ? -1 : 1
            return degree * sign
        }

        // Angle is set to a random rotation immediately
        const [angle, setAngle] = useState(randomRotation())

        useEffect(() => {
            setAngle(randomRotation())
        }, [])

        return (
            <motion.div
                as={Component}
                {...props}
                initial={{ rotate: 0 }}
                animate={{ rotate: angle }}
                transition={{ type: "spring", stiffness: 200, damping: 20 }}
            />
        )
    }
}