"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

export function TiltCard3D({
  children,
  maxTilt = 14,
  glare = true,
  className,
}: {
  children?: React.ReactNode;
  maxTilt?: number;
  glare?: boolean;
  className?: string;
}) {
  const ref = React.useRef<HTMLDivElement>(null);
  const [transform, setTransform] = React.useState("");
  const [glarePosition, setGlarePosition] = React.useState({ x: 50, y: 50, opacity: 0 });

  function onPointerMove(event: React.PointerEvent<HTMLDivElement>) {
    const node = ref.current;
    if (!node) return;

    const rect = node.getBoundingClientRect();
    const px = (event.clientX - rect.left) / rect.width;
    const py = (event.clientY - rect.top) / rect.height;

    const rotateY = (px - 0.5) * maxTilt * 2;
    const rotateX = (0.5 - py) * maxTilt * 2;

    setTransform(
      "perspective(900px) rotateX(" + rotateX.toFixed(2) + "deg) rotateY(" +
        rotateY.toFixed(2) + "deg) scale(1.02)",
    );
    setGlarePosition({ x: px * 100, y: py * 100, opacity: 0.35 });
  }

  function reset() {
    setTransform("perspective(900px) rotateX(0deg) rotateY(0deg) scale(1)");
    setGlarePosition((current) => ({ ...current, opacity: 0 }));
  }

  return (
    <div
      ref={ref}
      onPointerMove={onPointerMove}
      onPointerLeave={reset}
      style={{ transform, transformStyle: "preserve-3d" }}
      className={cn(
        "relative overflow-hidden rounded-2xl border bg-card p-6 transition-transform duration-200 ease-out will-change-transform",
        className,
      )}
    >
      {children}

      {glare && (
        <span
          aria-hidden
          className="pointer-events-none absolute inset-0 transition-opacity duration-300"
          style={{
            opacity: glarePosition.opacity,
            background:
              "radial-gradient(circle at " + glarePosition.x + "% " + glarePosition.y +
              "%, rgba(255,255,255,0.6), transparent 55%)",
          }}
        />
      )}
    </div>
  );
}
Related components
