"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "motion/react"

export function useRipple() {
    const [ripples, setRipples] = useState([])

    const addRipple = (e) => {
        const rect = e.currentTarget.getBoundingClientRect()
        const x = e.clientX - rect.left
        const y = e.clientY - rect.top
        const id = Date.now()

        setRipples((prev) => [...prev, { x, y, id }])

        setTimeout(() => {
            setRipples((prev) => prev.filter((r) => r.id !== id))
        }, 600)
    }

    const Ripples = (
        <AnimatePresence>
            {ripples.map((ripple) => (
                <motion.span
                    key={ripple.id}
                    initial={{ scale: 0, opacity: 0.6 }}
                    animate={{ scale: 4, opacity: 0 }}
                    exit={{ opacity: 0 }}
                    transition={{ duration: 0.6, ease: "easeOut" }}
                    style={{
                        left: ripple.x,
                        top: ripple.y,
                    }}
                    className="absolute h-8 w-8 rounded-full bg-white/70 pointer-events-none -translate-x-1/2 -translate-y-1/2"
                />
            ))}
        </AnimatePresence>
    )

    return { addRipple, Ripples }
}