"use client";

import { useState } from "react";
import Image from "next/image";

interface ImageCarouselProps {
  id: string;
  thumbnails: string[];
}

const ImageCarousel = ({ id, thumbnails }: ImageCarouselProps) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  const goToSlide = (slideIndex: number) => {
    setCurrentIndex(slideIndex);
  };

  return (
    <div
      id={id}
      className="carousel relative shadow-lg w-full max-w-full md:max-w-[50hw] h-[40rem]"
    >
      <div className="relative w-full h-full overflow-hidden carousel-inner">
        {thumbnails.map((thumbnail, index) => (
          <div
            key={index}
            className={`absolute inset-0 w-full h-full transition-opacity duration-500 ease-in-out delay-250 ${
              currentIndex === index ? "opacity-100" : "opacity-0"
            }`}
          >
            <Image
              alt={`Slide ${index + 1}`}
              src={thumbnail}
              fill
              style={{ objectFit: "scale-down" }}
              priority={index === 0}
            />
          </div>
        ))}
      </div>

      <div className="absolute bottom-0 z-10 flex justify-center w-full gap-2 py-2">
        {thumbnails.map((_, index) => (
          <button
            key={index}
            onClick={() => goToSlide(index)}
            className={`text-2xl leading-none ${
              currentIndex === index ? "text-white" : "text-white/50"
            }`}
            aria-label={`Go to slide ${index + 1}`}
          >
            •
          </button>
        ))}
      </div>
    </div>
  );
};

export default ImageCarousel;