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

export function SpotlightButton() {
  const divRef = useRef<HTMLButtonElement>(null);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [opacity, setOpacity] = useState(0);

  const handleMouseMove = (e: React.MouseEvent<HTMLButtonElement>) => {
    if (!divRef.current) return;
    const rect = divRef.current.getBoundingClientRect();
    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
  };

  return (
    <div className="flex items-center justify-center w-full h-40 bg-[#0a0a0a] rounded-xl border border-border">
      <button
        ref={divRef}
        onMouseMove={handleMouseMove}
        onMouseEnter={() => setOpacity(1)}
        onMouseLeave={() => setOpacity(0)}
        className="relative overflow-hidden rounded-xl bg-zinc-900 px-8 py-4 border border-zinc-800 text-foreground font-medium transition-colors hover:border-zinc-600"
      >
        <div
          className="pointer-events-none absolute -inset-px opacity-0 transition duration-300"
          style={{
            opacity,
            background: `radial-gradient(100px circle at ${position.x}px ${position.y}px, rgba(255,255,255,.15), transparent 40%)`,
          }}
        />
        <span className="relative z-10">Hover Me</span>
      </button>
    </div>
  );
}