import React from 'react';
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import Autoplay from "embla-carousel-autoplay";

interface ImageCarouselProps {
  images: { url: string; alt: string }[];
  delay?: number;
}

const ImageCarousel: React.FC<ImageCarouselProps> = ({ images, delay = 8000 }) => {
  return (
    <div className="relative">
      <Carousel
        plugins={[
          Autoplay({
            delay,
          }),
        ]}
      >
        <CarouselContent>
          {images.map((image, index) => (
            <CarouselItem key={index}>
              <img src={image.url} alt={image.alt} className="rounded-lg shadow-md" />
              <div className="text-center py-2 rounded-lg bg-white">
                {image.alt}
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  );
};

export default ImageCarousel;