shopify-template/components/shopify/product-detail/product-detail-gallery.tsx

import React from 'react';

interface ProductImage {
  url: string;
  altText?: string;
}

interface ProductDetailGalleryProps {
  images: ProductImage[];
  selectedImageIndex?: number;
  onImageSelect?: (index: number) => void;
}

const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
  images,
  selectedImageIndex = 0,
  onImageSelect,
}) => {
  const setSelectedImage = onImageSelect || (() => {});

  return (
    <div className="space-y-4">
      {/* Main Image */}
      <div className="product-gallery-main aspect-square bg-zinc-50 border border-border rounded-3xl overflow-hidden shadow-inner relative">
        {images.length > 0 ? (
          <img
            src={images[selectedImageIndex].url}
            alt={images[selectedImageIndex].altText || 'Product image'}
            className="w-full h-full object-cover transition-all hover:scale-105 duration-700"
          />
        ) : (
          <div className="absolute inset-0 flex items-center justify-center text-zinc-300">
            <i className="ri-image-line text-[120px]"></i>
          </div>
        )}
      </div>

      {/* Image Thumbnails */}
      {images.length > 1 && (
        <div className="grid grid-cols-4 gap-3">
          {images.map((image, index) => (
            <button
              key={index}
              onClick={() => setSelectedImage(index)}
              className={`aspect-square rounded-2xl overflow-hidden border transition-all duration-200 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-primary/30 ${
                selectedImageIndex === index
                  ? 'border-primary shadow-md scale-[1.03]'
                  : 'border-border hover:border-zinc-300'
              }`}
            >
              <img
                src={image.url}
                alt={image.altText || 'Product thumbnail'}
                className="w-full h-full object-cover"
              />
            </button>
          ))}
        </div>
      )}
    </div>
  );
};

export default ProductDetailGallery;