import { useRef } from "react";
import type { ReactNode } from "react";

interface SpotlightCardProps {
  children: ReactNode;
  className?: string;
  variant?: "light" | "dark";
  testId?: string;
}

/** Card with a cursor-tracking spotlight glow. Pass variant="dark" for dark bands. */
export default function SpotlightCard({ children, className = "", variant = "light", testId }: SpotlightCardProps) {
  const ref = useRef<HTMLDivElement>(null);
  const onMove = (e: React.MouseEvent) => {
    if (!ref.current) return;
    const r = ref.current.getBoundingClientRect();
    ref.current.style.setProperty("--mx", `${e.clientX - r.left}px`);
    ref.current.style.setProperty("--my", `${e.clientY - r.top}px`);
  };
  return (
    <div
      ref={ref}
      onMouseMove={onMove}
      className={`spot-card spot-card--${variant} ${className}`}
      data-testid={testId}
    >
      {children}
    </div>
  );
}