import React, { useState } from 'react'
import Lightbox from "yet-another-react-lightbox"
import "yet-another-react-lightbox/styles.css"

const Gallery = ({ images = [] }) => {
    const [isOpen, setIsOpen] = useState(false)
    const [photoIndex, setPhotoIndex] = useState(0)

    const openLightbox = (index) => {
        setPhotoIndex(index)
        setIsOpen(true)
    }

    return (
        <>
            {isOpen && (
                <Lightbox
                    open={isOpen}
                    close={() => setIsOpen(false)}
                    index={photoIndex}
                    slides={images.map(img => ({
                        src: img.src,
                        title: img.caption,
                        description: img.description
                    }))}
                />
            )}
            <div className="row">
                {images.map((obj, i) => (
                    <article className="6u 12u$(xsmall) work-item" key={i}>
                        <a
                            className="image fit thumb"
                            onClick={(e) => {
                                e.preventDefault()
                                openLightbox(i)
                            }}
                            href={obj.src}
                        >
                            <img src={obj.thumbnail} alt={obj.caption} />
                        </a>
                        <h3>{obj.caption}</h3>
                        <p>{obj.description}</p>
                    </article>
                ))}
            </div>
        </>
    )
}

export default Gallery
