import type { ComponentType } from "react"
import { useState } from "react"

export const withSkewAndBackgroundColor = (
    Component: ComponentType
): ComponentType => {
    return (props) => {
        const [bgColor, setBgColor] = useState(
            props.style?.backgroundColor || "#FFF"
        )

        const randomColor = () => {
            const letters = "0123456789ABCDEF"
            let color = "#"
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)]
            }
            return color
        }

        return (
            <Component
                {...props}
                whileHover={{ skew: -10, backgroundColor: bgColor }}
                onMouseEnter={() => setBgColor(randomColor())}
            />
        )
    }
}