Carousel

"use client";
import { useEffect, useState } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

type State = "first" | "middle" | "last";

const SLIDES = [
{ color: "from-lab-accent to-pink-500", title: "幻燈片一" },
{ color: "from-blue-500 to-cyan-500", title: "幻燈片二" },
{ color: "from-emerald-500 to-teal-500", title: "幻燈片三" },
{ color: "from-purple-500 to-pink-500", title: "幻燈片四" },
{ color: "from-orange-500 to-yellow-500", title: "幻燈片五" },
];

export function Carousel({ state = "first" }: { state?: State }) {
const idx = state === "first" ? 0 : state === "middle" ? 2 : SLIDES.length - 1;
const [active, setActive] = useState(idx);
useEffect(() => setActive(idx), [idx]);

return (
  <div className="w-full max-w-md space-y-2">
    <div className="relative overflow-hidden rounded-lg border border-border">
      <div
        className="flex transition-transform duration-500 ease-out"
        style={{ transform: `translateX(-${active * 100}%)` }}
      >
        {SLIDES.map((s, i) => (
          <div
            key={i}
            className={`grid h-44 w-full shrink-0 place-items-center bg-gradient-to-br ${s.color}`}
          >
            <span className="text-lg font-medium text-white drop-shadow">{s.title}</span>
          </div>
        ))}
      </div>
      <button
        onClick={() => setActive((a) => Math.max(0, a - 1))}
        disabled={active === 0}
        className="absolute left-2 top-1/2 grid h-8 w-8 -translate-y-1/2 place-items-center rounded-full bg-background/70 backdrop-blur disabled:opacity-30"
      >
        <ChevronLeft className="h-4 w-4" />
      </button>
      <button
        onClick={() => setActive((a) => Math.min(SLIDES.length - 1, a + 1))}
        disabled={active === SLIDES.length - 1}
        className="absolute right-2 top-1/2 grid h-8 w-8 -translate-y-1/2 place-items-center rounded-full bg-background/70 backdrop-blur disabled:opacity-30"
      >
        <ChevronRight className="h-4 w-4" />
      </button>
    </div>
    <div className="flex justify-center gap-1.5">
      {SLIDES.map((_, i) => (
        <button
          key={i}
          onClick={() => setActive(i)}
          className={cn(
            "h-1.5 rounded-full transition-all",
            i === active ? "w-6 bg-lab-accent" : "w-1.5 bg-muted-foreground/40",
          )}
        />
      ))}
    </div>
  </div>
);
}