Carousel

"use client"

import * as React from "react"
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CarouselStatus, type CarouselTransition } from "@/components/candor/ui/carousel"

const reports = [
  { title: "Weekly deploys", body: "31 deploys, 2 rolled back." },
  { title: "Open incidents", body: "1 open, 4 resolved this week." },
  { title: "Build time", body: "Median 6 min 12 s over the last 100 builds." },
  { title: "Test flakes", body: "3 tests failed and passed on retry." },
]

const transitions: CarouselTransition[] = ["slide", "fade", "vertical", "blur", "zoom", "uncover", "fill"]

// It never moves by itself: add `interval` to auto-advance, and it still stops for the pointer, focus and reduced motion.
// `transition` other than "slide" stacks the slides and draws each change (the drawings are the Pro motion-drawings item's).
export default function Example() {
  const [transition, setTransition] = React.useState<CarouselTransition>("slide")
  return (
    <div className="flex max-w-md flex-col gap-3">
      <label className="flex items-center gap-2 text-xs text-muted-foreground">
        transition
        <select value={transition} onChange={(e) => setTransition(e.target.value as CarouselTransition)} className="rounded-md border bg-background px-2 py-1 text-xs text-foreground">
          {transitions.map((t) => (
            <option key={t}>{t}</option>
          ))}
        </select>
      </label>
      <Carousel key={transition} label="Weekly reports" transition={transition}>
        <CarouselContent>
          {reports.map((r) => (
            <CarouselItem key={r.title}>
              <div className="flex h-32 flex-col justify-center gap-1 rounded-md border bg-card px-16">
                <h3 className="text-sm font-medium">{r.title}</h3>
                <p className="text-sm text-muted-foreground">{r.body}</p>
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
        <div className="mt-2 text-center">
          <CarouselStatus />
        </div>
      </Carousel>
    </div>
  )
}