Spotlight Card

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

export default function SpotlightCard({ children, spotlightColor = "rgba(255,255,255,0.08)" }) {
  const cardRef = useRef<HTMLDivElement>(null);

  const handleMouseMove = useCallback((e: React.MouseEvent) => {
    const el = cardRef.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(350px circle at ${x}px ${y}px, ${spotlightColor}, transparent 80%)`;
  }, []);

  return (
    <div ref={cardRef} onMouseMove={handleMouseMove} onMouseLeave={() => {
      if (cardRef.current) cardRef.current.style.background = "transparent";
    }}>
      {children}
    </div>
  );
}