"use client";
// Adapted from Magic UI (MIT). See THIRD_PARTY_NOTICES.md.
import {
  type ComponentProps,
  type CSSProperties,
  useEffect,
  useRef,
  useState,
} from "react";
export function RippleButton({
  children,
  className = "",
  type = "button",
  onClick,
  rippleColor,
  style,
  ...props
}: ComponentProps<"button"> & { rippleColor?: string }) {
  const [wave, setWave] = useState<{
    x: number;
    y: number;
    size: number;
    key: number;
  } | null>(null);
  const sequence = useRef(0);
  useEffect(() => {
    if (!wave) return;
    const timer = setTimeout(() => setWave(null), 650);
    return () => clearTimeout(timer);
  }, [wave]);
  return (
    <button
      {...props}
      type={type}
      style={{ "--ripple-button-wave": rippleColor, ...style } as CSSProperties}
      className={`ynr-ripple-button ${className}`}
      onClick={(event) => {
        onClick?.(event);
        if (
          event.defaultPrevented ||
          matchMedia("(prefers-reduced-motion: reduce)").matches
        )
          return;
        const rect = event.currentTarget.getBoundingClientRect();
        const size = Math.hypot(rect.width, rect.height) * 2;
        setWave({
          x:
            (event.detail ? event.clientX - rect.left : rect.width / 2) -
            size / 2,
          y:
            (event.detail ? event.clientY - rect.top : rect.height / 2) -
            size / 2,
          size,
          key: ++sequence.current,
        });
      }}
    >
      <span className="ynr-ripple-button-label">{children}</span>
      {wave && (
        <span
          key={wave.key}
          aria-hidden="true"
          className="ynr-ripple-button-wave"
          style={{
            width: wave.size,
            height: wave.size,
            left: wave.x,
            top: wave.y,
          }}
        />
      )}
    </button>
  );
}