'use client'

import { useState } from 'react'
import { OptimizedImage } from './OptimizedImage'

interface ImageItem {
  src: string
  alt: string
  caption?: string
}

interface ImageGalleryProps {
  images: ImageItem[]
  columns?: 2 | 3 | 4
  className?: string
}

export function ImageGallery({ images, columns = 3, className = '' }: ImageGalleryProps) {
  const [selectedImage, setSelectedImage] = useState<ImageItem | null>(null)

  const gridCols = {
    2: 'grid-cols-1 md:grid-cols-2',
    3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
    4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
  }

  return (
    <>
      <div className={`grid ${gridCols[columns]} gap-4 ${className}`}>
        {images.map((image, index) => (
          <button
            key={index}
            onClick={() => setSelectedImage(image)}
            className="group relative overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900/50 transition-all hover:border-emerald-500 hover:shadow-lg hover:shadow-emerald-500/20"
          >
            <div className="aspect-video relative">
              <img
                src={image.src}
                alt={image.alt}
                className="w-full h-full object-cover transition-transform group-hover:scale-105"
              />
            </div>
            {image.caption && <div className="p-2 text-sm text-zinc-400">{image.caption}</div>}
          </button>
        ))}
      </div>

      {selectedImage && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4"
          onClick={() => setSelectedImage(null)}
        >
          <button
            className="absolute top-4 right-4 text-zinc-400 hover:text-zinc-100 transition-colors"
            onClick={() => setSelectedImage(null)}
          >
            <svg className="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
          <div className="max-w-5xl w-full" onClick={e => e.stopPropagation()}>
            <OptimizedImage
              src={selectedImage.src}
              alt={selectedImage.alt}
              caption={selectedImage.caption}
              width={1200}
              height={800}
            />
          </div>
        </div>
      )}
    </>
  )
}