/**
 * Hover Mask - Mastering Framer
 * by Rick Waalders
 * https://x.com/rickwaalders
 */

import type { ComponentType } from "react"
import { useState, useEffect, useRef } from "react"

const MASK_SIZE = 100

export function bottomLayer(Component): ComponentType {
    return (props) => {
        return <Component {...props} style={{ pointerEvents: "none" }} />
    }
}

export function topLayer(Component): ComponentType {
    return (props) => {
        const ref = useRef(null)
        const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })

        useEffect(() => {
            const handleMouseMove = (e) => {
                if (ref.current) {
                    const rect = ref.current.getBoundingClientRect()
                    setMousePosition({
                        x: e.clientX - rect.left,
                        y: e.clientY - rect.top,
                    })
                }
            }

            window.addEventListener("mousemove", handleMouseMove)

            return () => {
                if (window) {
                    window.removeEventListener("mousemove", handleMouseMove)
                }
            }
        }, [])

        const extendedStyle = {
            color: "red",
            clipPath: `circle(${MASK_SIZE}px at ${mousePosition.x}px ${mousePosition.y}px)`,
            pointerEvents: "none",
            // filter: "blur(10px)",
        }

        return (
            <Component
                {...props}
                ref={(el) => {
                    ref.current = el
                }}
                style={extendedStyle}
            />
        )
    }
}