Spotlight Card

"use client";

import * as React from "react";

export interface SpotlightCardProps extends React.ComponentPropsWithoutRef<"div"> {
  /** Diameter of the spotlight in px. */
  size?: number;
  /** Spotlight colour (hex or any CSS colour). */
  accent?: string;
  /** Strength of the inner glow, 0–1. */
  opacity?: number;
  /** Also light up the 1px border under the pointer. */
  borderGlow?: boolean;
  /** Fade in / out duration in ms. */
  fadeDuration?: number;
  /** Corner radius in px. */
  rounded?: number;
}

/**
 * A card that reveals a soft radial light — inner glow plus border highlight — under the pointer.
 * Position is written to CSS variables on pointer move, so the card never re-renders.
 * Keyboard focus inside the card shows a centred spotlight.
 */
export const SpotlightCard = React.forwardRef<HTMLDivElement, SpotlightCardProps>(function SpotlightCard(
  {
    size = 360,
    accent = "#FF7448",
    opacity = 0.16,
    borderGlow = true,
    fadeDuration = 400,
    rounded = 20,
    className = "",
    style,
    children,
    onPointerMove,
    onPointerDown,
    onPointerLeave,
    onFocus,
    onBlur,
    ...props
  },
  ref,
) {
  const innerRef = React.useRef<HTMLDivElement>(null);
  React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement);

  /** Moves the light (px, relative to the card) and switches it on. */
  const light = (x: number, y: number) => {
    const el = innerRef.current;
    if (!el) return;
    el.style.setProperty("--sc-x", `${x}px`);
    el.style.setProperty("--sc-y", `${y}px`);
    if (el.dataset.lit !== "true") el.dataset.lit = "true";
  };

  const lightAtPointer = (event: React.PointerEvent<HTMLDivElement>) => {
    const rect = event.currentTarget.getBoundingClientRect();
    light(event.clientX - rect.left, event.clientY - rect.top);
  };

  const dim = () => {
    if (innerRef.current) innerRef.current.dataset.lit = "false";
  };

  const strength = `${Math.round(Math.min(Math.max(opacity, 0), 1) * 100)}%`;
  const fade = { transitionDuration: `${Math.max(fadeDuration, 0)}ms` };

  return (
    <div
      ref={innerRef}
      className={`group/spotlight relative isolate border border-zinc-900/10 bg-white text-zinc-900 dark:border-white/10 dark:bg-[#15181b] dark:text-zinc-100 ${className}`}
      style={{
        borderRadius: rounded,
        ["--sc-accent" as string]: accent,
        ["--sc-size" as string]: `${size}px`,
        ["--sc-strength" as string]: strength,
        ...style,
      }}
      onPointerMove={(event) => {
        onPointerMove?.(event);
        lightAtPointer(event);
      }}
      onPointerDown={(event) => {
        onPointerDown?.(event);
        lightAtPointer(event);
      }}
      onPointerLeave={(event) => {
        onPointerLeave?.(event);
        dim();
      }}
      onFocus={(event) => {
        onFocus?.(event);
        // Keyboard users get a centred light; mouse focus is already lit by the pointer.
        if ((event.target as Element).matches(":focus-visible")) {
          const el = innerRef.current;
          if (el) light(el.clientWidth / 2, el.clientHeight / 2);
        }
      }}
      onBlur={(event) => {
        onBlur?.(event);
        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) dim();
      }}
      {...props}
    >
      {/* Inner glow */}
      <span
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 -z-10 opacity-0 transition-opacity ease-out group-data-[lit=true]/spotlight:opacity-100 motion-reduce:transition-none"
        style={{
          ...fade,
          borderRadius: "inherit",
          background:
            "radial-gradient(var(--sc-size) circle at var(--sc-x, 50%) var(--sc-y, 50%), color-mix(in oklab, var(--sc-accent) var(--sc-strength), transparent), transparent 70%)",
        }}
      />
      {/* Border highlight: the same gradient, masked down to a 1px ring over the border. */}
      {borderGlow && (
        <span
          aria-hidden="true"
          className="pointer-events-none absolute -inset-px opacity-0 transition-opacity ease-out group-data-[lit=true]/spotlight:opacity-100 motion-reduce:transition-none"
          style={{
            ...fade,
            borderRadius: "inherit",
            padding: 1,
            background:
              "radial-gradient(calc(var(--sc-size) * 0.75) circle at calc(var(--sc-x, 50%) + 1px) calc(var(--sc-y, 50%) + 1px), var(--sc-accent), transparent 70%)",
            WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
            WebkitMaskComposite: "xor",
            mask: "linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)",
          }}
        />
      )}
      {children}
    </div>
  );
});