Spotlight-Karte

import { useRef, useState } from "react";

interface GlowCardProps {
  intensity?: number;
  glow?: string;
  radius?: number;
}

export default function GlowCard({
  intensity = 1,
  glow = "#6366f1",
  radius = 16,
}: GlowCardProps) {
  const [pos, setPos] = useState({ x: 50, y: 50 });
  const [hover, setHover] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  return (
    <div
      ref={ref}
      className="relative w-64 overflow-hidden border border-black/10 bg-white p-6 text-[#1d1d1f] dark:border-white/10 dark:bg-[#1c1c1e] dark:text-[#f5f5f7]"
      style={{ borderRadius: radius }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onMouseMove={(e) => {
        const el = ref.current;
        if (!el) return;
        const r = el.getBoundingClientRect();
        setPos({
          x: ((e.clientX - r.left) / r.width) * 100,
          y: ((e.clientY - r.top) / r.height) * 100,
        });
      }}
    >
      <div
        className="pointer-events-none absolute inset-0 transition-opacity duration-300"
        style={{
          opacity: hover ? Math.min(1, intensity * 0.6) : 0,
          background: `radial-gradient(320px circle at ${pos.x}% ${pos.y}%, ${glow}55, transparent 70%)`,
        }}
      />
      <div className="relative">
        <div className="mb-4 h-10 w-10 rounded-full" style={{ backgroundColor: glow }} />
        <h3 className="text-base font-semibold">Spotlight</h3>
        <p className="mt-1.5 text-sm text-[#86868b]">
          Ein radialer Schimmer folgt dem Cursor über die Karte.
        </p>
      </div>
    </div>
  );
}