Spotlight Button

"use client";
import { useCallback, useRef } from "react";

export default function SpotlightButton({ children }: { children: React.ReactNode }) {
  const btnRef = useRef<HTMLButtonElement>(null);

  const handleMouseMove = useCallback((e: React.MouseEvent) => {
    const el = btnRef.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    el.style.background = `radial-gradient(120px circle at ${x}px ${y}px, rgba(225,255,108,0.15), transparent 60%), #111`;
  }, []);

  return (
    <button ref={btnRef} onMouseMove={handleMouseMove}
      onMouseLeave={() => { if (btnRef.current) btnRef.current.style.background = "#111"; }}
      style={{ padding: "12px 24px", borderRadius: 8, border: "1px solid #333", color: "#fff" }}>
      {children}
    </button>
  );
}