import { forwardRef } from "react";
import type { ImageData } from "../types";

interface ImageCarouselProps {
  images: ImageData["images"];
  currentIndex: number;
  onTogglePlay: () => void;
}

export const ImageCarousel = forwardRef<HTMLDivElement, ImageCarouselProps>(
  ({ images, currentIndex, onTogglePlay }, ref) => {
    return (
      <div
        ref={ref}
        className="flex h-full w-full snap-x snap-mandatory overflow-x-auto overflow-y-hidden [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
      >
        {images.map((img, i) => (
          <div
            key={img.id}
            className="relative h-full min-w-full snap-center flex items-center justify-center bg-black/70 cursor-pointer"
            onClick={onTogglePlay}
          >
            <img
              src={img.url}
              alt={`image-${i + 1}`}
              className="max-w-full max-h-full object-contain"
              style={{
                width: img.width ? `${img.width}px` : undefined,
                height: img.height ? `${img.height}px` : undefined,
              }}
            />
          </div>
        ))}
      </div>
    );
  }
);

ImageCarousel.displayName = "ImageCarousel";