import { useState } from 'react'
import { ChevronLeft, ChevronRight, X } from 'lucide-react'

export default function ImageGallery({ data, onUpdate }) {
  const [currentImage, setCurrentImage] = useState(0)
  const [showModal, setShowModal] = useState(false)

  const images = data?.images || [
    { url: 'https://images.unsplash.com/photo-1541963463532-d68292c34b19', caption: 'Sample Image 1' },
    { url: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d', caption: 'Sample Image 2' },
  ]

  const nextImage = () => {
    setCurrentImage((prev) => (prev + 1) % images.length)
  }

  const prevImage = () => {
    setCurrentImage((prev) => (prev - 1 + images.length) % images.length)
  }

  return (
    <div className="my-6">
      <div className="grid grid-cols-2 gap-4">
        {images.map((image, index) => (
          <div key={index} className="cursor-pointer" onClick={() => {
            setCurrentImage(index)
            setShowModal(true)
          }}>
            <img 
              src={image.url} 
              alt={image.caption}
              className="w-full h-48 object-cover rounded-lg shadow-md hover:shadow-lg transition-shadow"
            />
            <p className="text-sm text-gray-600 mt-2">{image.caption}</p>
          </div>
        ))}
      </div>

      {showModal && (
        <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
          <div className="relative max-w-4xl max-h-full">
            <button
              onClick={() => setShowModal(false)}
              className="absolute -top-12 right-0 text-white hover:text-gray-300">
              <X className="h-6 w-6" />
            </button>
            
            <div className="relative">
              <img 
                src={images[currentImage].url} 
                alt={images[currentImage].caption}
                className="max-w-full max-h-[80vh] object-contain"
              />
              
              <div className="absolute inset-y-0 left-0 flex items-center">
                <button
                  onClick={prevImage}
                  className="p-2 text-white hover:text-gray-300 bg-black bg-opacity-50">
                <ChevronLeft className="h-6 w-6" />
              </button>
            </div>
              
              <div className="absolute inset-y-0 right-0 flex items-center">
                <button
                  onClick={nextImage}
                  className="p-2 text-white hover:text-gray-300 bg-black bg-opacity-50">
                <ChevronRight className="h-6 w-6" />
              </button>
            </div>
          </div>
          
          <div className="absolute bottom-4 left-0 right-0 text-center">
              <p className="text-white text-lg">{images[currentImage].caption}</p>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}