import { Override, motion } from "framer-motion"
import * as React from "react"

export function MaterialClickEffect(): Override {
    const [ripples, setRipples] = React.useState([])

    const handleClick = (event) => {
        // Get the container dimensions
        const rect = event.currentTarget.getBoundingClientRect()

        const x = event.clientX - rect.left
        const y = event.clientY - rect.top

        setRipples([...ripples, { x, y, id: Date.now() }])

        // Remove the ripple after 600ms
        setTimeout(() => {
            setRipples((prevRipples) => prevRipples.slice(1))
        }, 600)
    }

    return {
        onClick: handleClick,
        children: ripples.map((ripple) => (
            <motion.div
                key={ripple.id}
                initial={{ opacity: 1, scale: 0 }}
                animate={{ opacity: 0, scale: 2 }}
                transition={{ duration: 0.6, ease: "linear" }}
                style={{
                    position: "absolute",
                    width: "100px",
                    height: "100px",
                    top: ripple.y - 50, // Adjust the ripple position
                    left: ripple.x - 50, // Adjust the ripple position
                    background: "rgba(255, 255, 255, 0.3)",
                    borderRadius: "50%",
                }}
            />
        )),
    }
}