"use client";

// Adapted from Kokonut UI (@dorianbaffier), MIT. See THIRD_PARTY_NOTICES.md.
import { type ComponentProps } from "react";
export function SpotlightCard({
  className = "",
  children,
  onPointerMove,
  onPointerLeave,
  ...props
}: ComponentProps<"div">) {
  return (
    <div
      {...props}
      className={`ynr-spotlight-card ${className}`}
      onPointerMove={(event) => {
        onPointerMove?.(event);
        if (
          event.defaultPrevented ||
          event.pointerType === "touch" ||
          matchMedia("(prefers-reduced-motion: reduce)").matches
        )
          return;
        const rect = event.currentTarget.getBoundingClientRect();
        event.currentTarget.style.setProperty(
          "--spotlight-x",
          `${event.clientX - rect.left}px`,
        );
        event.currentTarget.style.setProperty(
          "--spotlight-y",
          `${event.clientY - rect.top}px`,
        );
      }}
      onPointerLeave={(event) => {
        event.currentTarget.style.removeProperty("--spotlight-x");
        event.currentTarget.style.removeProperty("--spotlight-y");
        onPointerLeave?.(event);
      }}
    >
      <div className="ynr-spotlight-card-content">{children}</div>
    </div>
  );
}