import {  Carousel,  CarouselContent,  CarouselItem,  CarouselNext,  CarouselPrevious,} from "@/components/ui/carousel"const destinations = [  { name: "NORTH SHORE", place: "Lake Superior, Minnesota", color: "#b6f36b", tag: "COASTAL AIR" },  { name: "DESERT DAYS", place: "Joshua Tree, California", color: "#ffb36b", tag: "OPEN SKIES" },  { name: "MOUNTAIN TIME", place: "Bend, Oregon", color: "#83d9e8", tag: "TRAIL READY" },]export default function CarouselDemo() {  return (    <Carousel className="w-full max-w-md">      <CarouselContent>        {destinations.map((destination, index) => (          <CarouselItem key={destination.name}>            <div className="overflow-hidden rounded-lg border-2 border-black bg-white shadow-[4px_4px_0_0_#000]">              <div                className="relative flex h-56 flex-col justify-between overflow-hidden p-5"                style={{ backgroundColor: destination.color }}              >                <div className="absolute -right-5 top-8 size-40 rounded-full border-2 border-black bg-[#ffe45c]" />                <div className="absolute right-12 top-20 size-16 rounded-full border-2 border-black bg-[#ff795c]" />                <div className="relative z-10 w-fit rounded border-2 border-black bg-white px-2 py-1 text-xs font-black tracking-wider shadow-[2px_2px_0_0_#000]">                  {destination.tag}                </div>                <div className="relative z-10 text-4xl font-black leading-none tracking-tight sm:text-5xl">                  {destination.name}                </div>              </div>              <div className="flex items-center justify-between gap-3 p-4">                <div>                  <p className="font-bold">{destination.place}</p>                  <p className="text-sm text-muted-foreground">A little room to roam.</p>                </div>                <span className="shrink-0 rounded border-2 border-black px-2 py-1 text-xs font-bold">                  0{index + 1} / 03                </span>              </div>            </div>          </CarouselItem>        ))}      </CarouselContent>      <CarouselPrevious />      <CarouselNext />    </Carousel>  )}