SpotlightCard

"use client";

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

type SpotlightCardProps = {
  children: ReactNode;
  className?: string;
  /** Colour of the light. Any CSS colour. */
  color?: string;
  /** Size of the light on the border, in pixels. */
  size?: number;
  /** Card fill. */
  background?: string;
  /** Border colour where the light is not. */
  border?: string;
};

/* SpotlightCard: a soft light follows the pointer across the card and its border. */
export function SpotlightCard({
  children,
  className = "",
  color = "#34f5c5",
  size = 240,
  background = "#0a1714",
  border = "#1a2a27",
}: SpotlightCardProps) {
  const ref = useRef<HTMLDivElement>(null);

  const onMove = (e: React.PointerEvent<HTMLDivElement>) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    el.style.setProperty("--x", `${e.clientX - r.left}px`);
    el.style.setProperty("--y", `${e.clientY - r.top}px`);
  };

  return (
    <div
      ref={ref}
      onPointerMove={onMove}
      className={`relative rounded-2xl p-px ${className}`}
      style={
        {
          "--x": "50%",
          "--y": "0%",
          background: `radial-gradient(${size}px circle at var(--x) var(--y), ${color}, transparent 60%), ${border}`,
        } as CSSProperties
      }
    >
      <div
        className="relative h-full rounded-[15px] p-6"
        style={{
          background: `radial-gradient(${size * 1.25}px circle at var(--x) var(--y), color-mix(in srgb, ${color} 12%, transparent), transparent 60%), ${background}`,
        }}
      >
        {children}
      </div>
    </div>
  );
}