"use client";

import { useRef } from "react";

export function SpotlightFollowButton() {
  const ref = useRef<HTMLButtonElement>(null);

  function handleMove(e: React.MouseEvent<HTMLButtonElement>) {
    const btn = ref.current;
    if (!btn) return;
    const rect = btn.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width) * 100;
    const y = ((e.clientY - rect.top) / rect.height) * 100;
    btn.style.setProperty("--mx", `${x}%`);
    btn.style.setProperty("--my", `${y}%`);
  }

  return (
    <div className="bg-[#0a0a0f] p-12 grid place-items-center">
      <button
        ref={ref}
        type="button"
        onMouseMove={handleMove}
        className="relative overflow-hidden px-8 py-3.5 rounded-xl text-[14px] font-medium text-[#e5e7eb] transition-transform active:scale-[0.98]"
        style={{
          background: "#13131c",
          border: "1px solid #25253a",
          ["--mx" as string]: "50%",
          ["--my" as string]: "50%",
        }}
      >
        <span
          aria-hidden
          className="absolute inset-0 pointer-events-none transition-opacity"
          style={{
            background:
              "radial-gradient(220px circle at var(--mx) var(--my), rgba(255,255,255,0.16), transparent 60%)",
          }}
        />
        <span className="relative">Hover and move the cursor</span>
      </button>
    </div>
  );
}
Spotlight Follow Button
