'use client';

import { Image as ImageType } from 'lib/shopify/types';
import Image from 'next/image';
import { useState } from 'react';

interface ProductGalleryProps {
  images: ImageType[];
}

export function ProductGallery({ images = [] }: ProductGalleryProps) {
  const [selectedImage, setSelectedImage] = useState(0);

  if (!images.length) {
    return (
      <div className="aspect-square w-full bg-gray-100 flex items-center justify-center">
        <p className="text-gray-500">No image available</p>
      </div>
    );
  }

  return (
    <div className="flex flex-col md:flex-row gap-3 md:items-start pt-5 w-full overflow-hidden">
      {/* Thumbnails */}
      <div className="order-2 md:order-1 flex md:flex-col gap-3 overflow-x-auto md:overflow-y-auto max-h-[600px] md:w-16 flex-shrink-0">
        {images.map((image, index) => (
          <button
            key={`${image.url}-${index}`}
            className={`relative h-14 w-14 flex-shrink-0 overflow-hidden border ${
              selectedImage === index ? 'border-black' : 'border-gray-200'
            }`}
            onClick={() => setSelectedImage(index)}
            aria-label={`View image ${index + 1} of ${images.length}`}
          >
            <Image
              src={image.url}
              alt={image.altText || ''}
              fill
              className="object-cover"
              sizes="56px"
            />
          </button>
        ))}
      </div>

      {/* Main image */}
      <div className="order-1 md:order-2 relative w-full h-[500px] md:h-[550px] flex-grow overflow-hidden">
        <div className="w-full h-full relative">
          {images[selectedImage] && (
            <img
              src={images[selectedImage].url}
              alt={images[selectedImage].altText || ''}
              className="w-full h-full object-cover object-top"
            />
          )}
        </div>
      </div>
    </div>
  );
}