import { useState } from 'react';
import './blocks.css';

export interface ImageGalleryBlockProps {
  title?: string;
  subtitle?: string;
  images: Array<{
    url: string;
    alt?: string;
    caption?: string;
    thumbnailUrl?: string;
  }>;
  columns?: 2 | 3 | 4;
  variant?: 'grid' | 'masonry' | 'carousel';
  lightbox?: boolean;
}

export function ImageGalleryBlock({ 
  title, 
  subtitle, 
  images, 
  columns = 3,
  variant = 'grid',
  lightbox = false
}: ImageGalleryBlockProps) {
  const [selectedImage, setSelectedImage] = useState<number | null>(null);

  return (
    <section className={`shared-image-gallery shared-image-gallery--${variant}`}>
      {title && <h2 className="shared-image-gallery__title">{title}</h2>}
      {subtitle && <p className="shared-image-gallery__subtitle">{subtitle}</p>}
      <div className={`shared-image-gallery__grid shared-image-gallery__grid--${columns}`}>
        {images.map((image, index) => (
          <div 
            key={index} 
            className="shared-image-gallery__item"
            onClick={() => lightbox && setSelectedImage(index)}
          >
            <img 
              src={image.thumbnailUrl || image.url} 
              alt={image.alt || image.caption || `Image ${index + 1}`}
              className="shared-image-gallery__image"
              loading="lazy"
            />
            {image.caption && (
              <p className="shared-image-gallery__caption">{image.caption}</p>
            )}
          </div>
        ))}
      </div>
      {lightbox && selectedImage !== null && (
        <div 
          className="shared-image-gallery__lightbox"
          onClick={() => setSelectedImage(null)}
        >
          <img 
            src={images[selectedImage].url} 
            alt={images[selectedImage].alt || images[selectedImage].caption || 'Lightbox image'}
            className="shared-image-gallery__lightbox-image"
          />
        </div>
      )}
    </section>
  );
}