"use client";

import { useRef, useState } from "react";

type Ripple = { id: number; x: number; y: number; size: number };

export function RippleWaveButton() {
  const ref = useRef<HTMLButtonElement>(null);
  const [ripples, setRipples] = useState<Ripple[]>([]);

  function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
    const btn = ref.current;
    if (!btn) return;
    const rect = btn.getBoundingClientRect();
    const size = Math.max(rect.width, rect.height) * 2;
    const x = e.clientX - rect.left - size / 2;
    const y = e.clientY - rect.top - size / 2;
    const id = Date.now() + Math.random();
    setRipples((r) => [...r, { id, x, y, size }]);
    setTimeout(() => {
      setRipples((r) => r.filter((rp) => rp.id !== id));
    }, 700);
  }

  return (
    <div className="bg-[#FAFAF8] p-12 grid place-items-center">
      <style>{`
        @keyframes ripple-expand {
          to { transform: scale(1); opacity: 0; }
        }
      `}</style>
      <button
        ref={ref}
        type="button"
        onClick={handleClick}
        className="relative overflow-hidden px-7 py-3.5 rounded-full text-[14px] font-medium text-white"
        style={{
          background: "#0d6efd",
          boxShadow: "0 4px 14px -4px rgba(13,110,253,0.5)",
        }}
      >
        <span className="relative z-10">Tap anywhere on me</span>
        {ripples.map((r) => (
          <span
            key={r.id}
            aria-hidden
            className="pointer-events-none absolute rounded-full"
            style={{
              left: r.x,
              top: r.y,
              width: r.size,
              height: r.size,
              background: "rgba(255,255,255,0.45)",
              transform: "scale(0)",
              opacity: 1,
              animation: "ripple-expand 0.7s ease-out forwards",
            }}
          />
        ))}
      </button>
    </div>
  );
}
Ripple Wave Button
