"use client";
// Adapted from Magic UI (MIT). See THIRD_PARTY_NOTICES.md.
import { type ComponentProps } from "react";
export function MagicCard({
  className = "",
  children,
  onPointerMove,
  onPointerLeave,
  ...props
}: ComponentProps<"div">) {
  return (
    <div
      {...props}
      className={`ynr-magic-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(
          "--magic-card-x",
          `${event.clientX - rect.left}px`,
        );
        event.currentTarget.style.setProperty(
          "--magic-card-y",
          `${event.clientY - rect.top}px`,
        );
      }}
      onPointerLeave={(event) => {
        onPointerLeave?.(event);
        if (!event.defaultPrevented) {
          event.currentTarget.style.removeProperty("--magic-card-x");
          event.currentTarget.style.removeProperty("--magic-card-y");
        }
      }}
    >
      <div className="ynr-magic-card-content">{children}</div>
    </div>
  );
}