Carousel

import { Carousel } from "@ark-ui/react/carousel";

export default function HeroCarousel() {
  const slides = [
    {
      title: "Discover Amazing Places",
      subtitle: "Explore the world's most beautiful destinations",
      image: "https://cdn.21st.dev/assets/mirror/a2/a28e72da5c897557664a6035de5493c1c9ca436900e2c9909f40f8c5b212ca29.jpg",
      cta: "Start Exploring",
    },
    {
      title: "Adventure Awaits",
      subtitle: "Create memories that will last a lifetime",
      image: "https://cdn.21st.dev/assets/mirror/2a/2a1c0941b57e736748fff7dd3249449ea9eaf074cebeeadad25626b073d13f41.jpg",
      cta: "Book Now",
    },
    {
      title: "Journey Beyond",
      subtitle: "Experience luxury travel like never before",
      image: "https://cdn.21st.dev/assets/mirror/42/42f401fc7b77a535d15372f4f4ab81593c9ab779131cd627a4c24adb5cc37ec7.jpg",
      cta: "Learn More",
    },
  ];

  return (
    <Carousel.Root
      defaultPage={0}
      slideCount={slides.length}
      autoplay
      className="w-full"
    >
      <div className="relative">
        <Carousel.ItemGroup className="overflow-hidden rounded-xl">
          {slides.map((slide, index) => (
            <Carousel.Item key={index} index={index}>
              <div className="relative h-96 lg:h-[500px]">
                <img
                  src={slide.image}
                  alt={slide.title}
                  className="w-full h-full object-cover"
                />
                <div className="absolute inset-0 bg-black bg-opacity-40" />
                <div className="absolute inset-0 flex items-center justify-center text-center text-white">
                  <div className="max-w-2xl px-6">
                    <h1 className="text-4xl lg:text-6xl font-bold mb-4">
                      {slide.title}
                    </h1>
                    <p className="text-xl lg:text-2xl mb-8 text-gray-200">
                      {slide.subtitle}
                    </p>
                    <button className="px-8 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-semibold transition-colors">
                      {slide.cta}
                    </button>
                  </div>
                </div>
              </div>
            </Carousel.Item>
          ))}
        </Carousel.ItemGroup>

        <Carousel.Control className="absolute inset-x-4 top-1/2 -translate-y-1/2 flex justify-between pointer-events-none">
          <Carousel.PrevTrigger className="p-3 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full transition-all pointer-events-auto text-white backdrop-blur-xs">
            ←
          </Carousel.PrevTrigger>
          <Carousel.NextTrigger className="p-3 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full transition-all pointer-events-auto text-white backdrop-blur-xs">
            →
          </Carousel.NextTrigger>
        </Carousel.Control>
      </div>

      <Carousel.IndicatorGroup className="flex justify-center items-center mt-6 gap-3">
        {slides.map((_, index) => (
          <Carousel.Indicator
            key={index}
            index={index}
            className="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600 data-current:bg-blue-500 dark:data-current:bg-blue-400 data-current:w-8 transition-all cursor-pointer"
          />
        ))}
      </Carousel.IndicatorGroup>
    </Carousel.Root>
  );
}