Spotlight Effect

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

export function Spotlight({ children, className = "" }: {
  children: React.ReactNode;
  className?: string;
}) {
  const ref = useRef<HTMLDivElement>(null);
  const [pos, setPos] = useState({ x: 0, y: 0 });
  const [opacity, setOpacity] = useState(0);

  function handleMove(e: React.MouseEvent) {
    const rect = ref.current?.getBoundingClientRect();
    if (!rect) return;
    setPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
    setOpacity(1);
  }

  return (
    <div
      ref={ref}
      onMouseMove={handleMove}
      onMouseLeave={() => setOpacity(0)}
      className={`relative overflow-hidden rounded-2xl border border-white/10 bg-neutral-950 p-8 ${className}`}
    >
      <motion.div
        className="pointer-events-none absolute -inset-px rounded-2xl"
        animate={{ opacity }}
        transition={{ duration: 0.3 }}
        style={{
          background: `radial-gradient(400px circle at ${pos.x}px ${pos.y}px, rgba(255,255,255,0.06), transparent 60%)`,
        }}
      />
      {children}
    </div>
  );
}