"use client";

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

type ShimmerCTAProps = {
  children: ReactNode;
  className?: string;
  onClick?: () => void;
  /** Colour of the sheen. */
  shine?: string;
  /** Seconds of rest between sweeps. */
  every?: number;
};

/* ShimmerCTA: a light sheen sweeps across the button now and then, catching the eye without shouting. */
export function ShimmerCTA({
  children,
  className = "rounded-xl bg-[#2a2245] px-9 py-4 text-[15px] font-medium text-[#ede9fe] ring-1 ring-[#a78bfa]/40",
  onClick,
  shine = "rgba(255,255,255,0.35)",
  every = 2.4,
}: ShimmerCTAProps) {
  const reduce = useReducedMotion();

  return (
    <button type="button" onClick={onClick} className={`relative isolate overflow-hidden ${className}`}>
      {!reduce && (
        <motion.span
          aria-hidden
          className="pointer-events-none absolute inset-y-0 -left-1/2 w-1/2 -skew-x-12"
          style={{ background: `linear-gradient(90deg, transparent, ${shine}, transparent)` }}
          animate={{ x: ["0%", "320%"] }}
          transition={{ duration: 1.1, repeat: Infinity, repeatDelay: every, ease: [0.4, 0, 0.2, 1] }}
        />
      )}
      <span className="relative">{children}</span>
    </button>
  );
}