Carousel

// owner: Sona
"use client";

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

const slides = [
  {
    title: "Product onboarding",
    description: "Guide teams as they ship new features.",
  },
  {
    title: "Daily standup",
    description: "Keep track of blockers and celebrate wins.",
  },
  {
    title: "Retro meeting",
    description: "Catalog insights and next steps.",
  },
];

export default function CarouselExample() {
  return (
    <Carousel className="w-full max-w-3xl">
      <CarouselContent>
        {slides.map((slide, index) => (
          <CarouselItem key={slide.title}>
            <Card className="h-48">
              <CardHeader>
                <CardTitle>
                  {index + 1}. {slide.title}
                </CardTitle>
                <CardDescription>{slide.description}</CardDescription>
              </CardHeader>
              <CardContent className="text-sm text-muted-foreground">
                Each card is a standard Card component, so you can render any
                content inside.
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}