"use client";

import * as React from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

export function PerspectiveCarousel3D({
  items,
  radius = 320,
  height = 260,
  className,
}: {
  items: React.ReactNode[];
  radius?: number;
  height?: number;
  className?: string;
}) {
  const [index, setIndex] = React.useState(0);
  const step = 360 / Math.max(items.length, 1);

  return (
    <div className={cn("w-full", className)}>
      <div
        className="relative w-full"
        style={{ height, perspective: 1400, perspectiveOrigin: "50% 50%" }}
      >
        <div
          className="absolute inset-0 transition-transform duration-700 ease-out"
          style={{
            transformStyle: "preserve-3d",
            transform: "translateZ(-" + radius + "px) rotateY(" + -index * step + "deg)",
          }}
        >
          {items.map((item, itemIndex) => (
            <div
              key={itemIndex}
              className="absolute left-1/2 top-1/2 flex w-56 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-xl border bg-card p-5 shadow-lg"
              style={{
                height: height - 40,
                transform:
                  "rotateY(" + itemIndex * step + "deg) translateZ(" + radius + "px)",
                backfaceVisibility: "hidden",
              }}
            >
              {item}
            </div>
          ))}
        </div>
      </div>

      <div className="mt-4 flex items-center justify-center gap-2">
        <button
          onClick={() => setIndex((value) => value - 1)}
          className="flex size-9 items-center justify-center rounded-full border transition-colors hover:bg-accent"
          aria-label="Previous"
        >
          <ChevronLeft className="size-4 rtl:rotate-180" />
        </button>
        <span className="text-xs tabular-nums text-muted-foreground">
          {(((index % items.length) + items.length) % items.length) + 1} / {items.length}
        </span>
        <button
          onClick={() => setIndex((value) => value + 1)}
          className="flex size-9 items-center justify-center rounded-full border transition-colors hover:bg-accent"
          aria-label="Next"
        >
          <ChevronRight className="size-4 rtl:rotate-180" />
        </button>
      </div>
    </div>
  );
}
Related components
