Autoplay Gallery

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNavigation,
  useCarousel,
  useCarouselAutoplay,
} from "@/components/ui/carousel";
import { Pause, Play } from "lucide-react";

const images = [
  { src: "/photos/image-1.jpg", alt: "Photo 1" },
  { src: "/photos/image-2.jpg", alt: "Photo 2" },
  // ... more images
];

function ThumbnailsWithAutoplay() {
  const { index, setIndex, itemsCount } = useCarousel();
  const { isPlaying, toggle } = useCarouselAutoplay({
    interval: 4000,
  });

  return (
    <div className="flex items-center justify-center gap-2 pt-4">
      {images.slice(0, itemsCount).map((image, i) => (
        <button
          key={i}
          onClick={() => setIndex(i)}
          className={`h-12 w-16 overflow-hidden rounded-md border-2 transition-all ${
            index === i
              ? "border-zinc-900 dark:border-zinc-100"
              : "border-transparent opacity-60 hover:opacity-100"
          }`}
        >
          <img
            src={image.src}
            alt={image.alt}
            className="h-full w-full object-cover"
          />
        </button>
      ))}
      <button
        onClick={toggle}
        className="ml-2 flex h-10 w-10 items-center justify-center rounded-full border"
        aria-label={isPlaying ? "Pause" : "Play"}
      >
        {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
      </button>
    </div>
  );
}

export function AutoplayGallery() {
  return (
    <Carousel loop>
      <CarouselContent>
        {images.map((image, index) => (
          <CarouselItem key={index}>
            <img src={image.src} alt={image.alt} />
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselNavigation alwaysShow />
      <ThumbnailsWithAutoplay />
    </Carousel>
  );
}