import { useState } from 'react';

interface ProductGalleryProps {
  images: string[];
}

const ProductGallery = ({ images }: ProductGalleryProps) => {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <div className="gallery-container">
      <div className="main-image-wrapper">
        <img 
          src={images[activeIndex]} 
          alt="Product Main" 
          className="main-image"
        />
      </div>
      
      <div className="thumbnails">
        {images.map((img, idx) => (
          <img
            key={idx}
            src={img}
            alt={`Thumbnail ${idx + 1}`}
            className={`thumbnail ${activeIndex === idx ? 'active' : ''}`}
            onClick={() => setActiveIndex(idx)}
          />
        ))}
      </div>
    </div>
  );
};

export default ProductGallery;
