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

export function withRandomGradientOnHover(Component): ComponentType {
    return (props) => {
        const [background, setBackground] = useState("")

        // Generate a random color
        const randomColor = () => {
            const random = (min, max) =>
                Math.floor(Math.random() * (max - min + 1) + min)
            return `hsl(${random(0, 360)}, ${random(50, 100)}%, ${random(
                40,
                60
            )}%)`
        }

        // Generate a random gradient
        const randomGradient = () => {
            const angle = Math.floor(Math.random() * 360)
            const color1 = randomColor()
            const color2 = randomColor()
            return `linear-gradient(${angle}deg, ${color1}, ${color2})`
        }

        const handleMouseEnter = () => {
            setBackground(randomGradient())
        }

        const handleMouseLeave = () => {
            setBackground("")
        }

        return (
            <Component
                {...props}
                as={motion.div}
                style={{ ...props.style, background }}
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
            />
        )
    }
}