"use client";

// Adapted from Kokonut UI (@dorianbaffier), MIT. See THIRD_PARTY_NOTICES.md.
import {
  useEffect,
  useRef,
  useState,
  type ComponentProps,
  type CSSProperties,
} from "react";
export function ParticleButton({
  children,
  className = "",
  onClick,
  type = "button",
  ...props
}: ComponentProps<"button">) {
  const [origin, setOrigin] = useState({ x: 0, y: 0 });
  const [burst, setBurst] = useState(0);
  const [visible, setVisible] = useState(false);
  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
  useEffect(() => () => clearTimeout(timer.current), []);
  return (
    <button
      {...props}
      type={type}
      className={`ynr-particle-button ${className}`}
      onClick={(event) => {
        onClick?.(event);
        if (
          event.defaultPrevented ||
          matchMedia("(prefers-reduced-motion: reduce)").matches
        )
          return;
        const target = event.currentTarget;
        const rect = target.getBoundingClientRect();
        // Pointer coordinates include transforms; the particle origin uses the padding box.
        const scaleX = rect.width / target.offsetWidth || 1;
        const scaleY = rect.height / target.offsetHeight || 1;
        setOrigin({
          x: event.detail
            ? (event.clientX - rect.left) / scaleX - target.clientLeft
            : target.clientWidth / 2,
          y: event.detail
            ? (event.clientY - rect.top) / scaleY - target.clientTop
            : target.clientHeight / 2,
        });
        clearTimeout(timer.current);
        setBurst((value) => value + 1);
        setVisible(true);
        timer.current = setTimeout(() => setVisible(false), 700);
      }}
    >
      <span>{children}</span>
      {visible && (
        <span
          key={burst}
          aria-hidden="true"
          className="ynr-particle-burst"
          style={{ left: origin.x, top: origin.y }}
        >
          {Array.from({ length: 8 }, (_, i) => (
            <i
              key={i}
              style={
                {
                  "--particle-x": `${Math.cos((i * Math.PI) / 4) * 55}px`,
                  "--particle-y": `${Math.sin((i * Math.PI) / 4) * 45}px`,
                } as CSSProperties
              }
            />
          ))}
        </span>
      )}
    </button>
  );
}