GlowPulse

"use client";

import type { ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";

type GlowPulseProps = {
  children: ReactNode;
  className?: string;
  onClick?: () => void;
  /** Colour of the rings. */
  color?: string;
  /** Seconds for one ring to fade out. */
  speed?: number;
};

/* GlowPulse: two soft rings keep breathing out from the button, like a heartbeat asking for the click. */
export function GlowPulse({
  children,
  className = "rounded-full bg-[#a78bfa] px-9 py-4 text-[15px] font-medium text-[#1a1530] shadow-[0_0_32px_-6px_#a78bfa]",
  onClick,
  color = "#a78bfa",
  speed = 1.8,
}: GlowPulseProps) {
  const reduce = useReducedMotion();

  return (
    <button type="button" onClick={onClick} className={`relative ${className}`}>
      {!reduce &&
        [0, speed / 2].map((delay) => (
          <motion.span
            key={delay}
            aria-hidden
            className="pointer-events-none absolute inset-0 rounded-[inherit]"
            style={{ boxShadow: `0 0 0 2px ${color}` }}
            initial={{ scale: 1, opacity: 0.7 }}
            animate={{ scale: 1.35, opacity: 0 }}
            transition={{ duration: speed, delay, repeat: Infinity, ease: "easeOut" }}
          />
        ))}
      <span className="relative">{children}</span>
    </button>
  );
}