"use client";

import { ImageCarousel } from "./image-carousel";

interface ServiceGalleryProps {
  images: string[];
}

export function ServiceGallery({ images }: ServiceGalleryProps) {
  if (!images || images.length === 0) {
    return null;
  }

  return (
    <div className="space-y-4">
      {/* Main carousel */}
      <ImageCarousel
        images={images}
        className="aspect-[16/9] md:aspect-[21/9] lg:aspect-[3/1]"
      />

      {/* Thumbnails */}
      {/* {images.length > 1 && (
        <div className="flex space-x-2 overflow-x-auto pb-2 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent">
          {images.map((image, index) => (
            <button
              key={index}
              onClick={() => setSelectedImage(index)}
              className={cn(
                "relative h-16 w-24 flex-shrink-0 overflow-hidden rounded-md border-2 transition-all",
                selectedImage === index
                  ? "border-red-600"
                  : "border-transparent hover:border-gray-300",
              )}
            >
              <Image
                src={
                  `${process.env.NEXT_PUBLIC_API_URL}/storage/${image}` ||
                  "/placeholder.svg"
                }
                alt={`Thumbnail ${index + 1}`}
                fill
                className="object-cover"
              />
            </button>
          ))}
        </div>
      )} */}
    </div>
  );
}