"use client";

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

export interface TiltGalleryItem {
  label: string;
  color: string;
  depth?: number;
}

export function TiltGallery3D({
  items,
  maxTilt = 12,
  className,
}: {
  items: TiltGalleryItem[];
  maxTilt?: number;
  className?: string;
}) {
  const ref = React.useRef<HTMLDivElement>(null);
  const [tilt, setTilt] = React.useState({ x: 0, y: 0 });

  function onPointerMove(event: React.PointerEvent<HTMLDivElement>) {
    const rect = ref.current?.getBoundingClientRect();
    if (!rect) return;
    const px = (event.clientX - rect.left) / rect.width;
    const py = (event.clientY - rect.top) / rect.height;
    setTilt({ x: (0.5 - py) * maxTilt * 2, y: (px - 0.5) * maxTilt * 2 });
  }

  return (
    <div
      ref={ref}
      onPointerMove={onPointerMove}
      onPointerLeave={() => setTilt({ x: 0, y: 0 })}
      className={cn("w-full", className)}
      style={{ perspective: 1200 }}
    >
      <div
        className="grid grid-cols-2 gap-4 transition-transform duration-300 ease-out sm:grid-cols-3"
        style={{
          transformStyle: "preserve-3d",
          transform:
            "rotateX(" + tilt.x.toFixed(2) + "deg) rotateY(" + tilt.y.toFixed(2) + "deg)",
        }}
      >
        {items.map((item, index) => (
          <div
            key={item.label}
            className="flex aspect-4/3 items-end rounded-xl border p-4 shadow-lg transition-shadow"
            style={{
              background:
                "linear-gradient(150deg, " + item.color + ", " + item.color + "22)",
              transform: "translateZ(" + (item.depth ?? (index % 3) * 22 + 16) + "px)",
            }}
          >
            <span className="text-sm font-medium text-white drop-shadow">{item.label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}
Related components
