PrismButton

"use client";

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

type PrismButtonProps = {
  children: ReactNode;
  className?: string;
  onClick?: () => void;
  /** Spectrum colours, left to right. */
  colors?: string[];
};

/* PrismButton: a band of rainbow light runs across the glass, following the pointer like light through a prism. */
export function PrismButton({
  children,
  className = "rounded-xl border border-white/15 bg-white/5 px-9 py-4 text-[15px] font-medium text-white",
  onClick,
  colors = ["#ff6b8b", "#ffb86b", "#fff36b", "#6bffb0", "#6bd5ff", "#a78bfa"],
}: PrismButtonProps) {
  const reduce = useReducedMotion();
  const stops = colors.map((c, i) => `${c} calc(var(--px) + ${-25 + (50 * i) / (colors.length - 1)}%)`).join(", ");

  return (
    <button
      type="button"
      onClick={onClick}
      onPointerMove={(e) => {
        if (reduce) return;
        const b = e.currentTarget.getBoundingClientRect();
        e.currentTarget.style.setProperty("--px", `${((e.clientX - b.left) / b.width) * 100}%`);
      }}
      className={`group relative isolate overflow-hidden ${className}`}
      style={{ "--px": "50%" } as CSSProperties}
    >
      <span
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 opacity-30 mix-blend-screen blur-md transition-opacity duration-300 group-hover:opacity-90 group-focus-visible:opacity-90"
        style={{ background: `linear-gradient(105deg, transparent calc(var(--px) - 40%), ${stops}, transparent calc(var(--px) + 40%))` }}
      />
      <span className="relative">{children}</span>
    </button>
  );
}