'use client';
import { useState } from "react";
import 'react-image-lightbox/style.css';
import Lightbox from 'react-image-lightbox';

export default function GalleryLightbox({ images }) {
    const [isOpen, setIsOpen] = useState(false);
    const [photoIndex, setPhotoIndex] = useState(0);

    return (
        <>
            <div className="masonry-items-container row no-gutters clearfix">
                {images.map((img, idx) => (
                    <div key={idx} className={`col-lg-3 col-md-6 col-sm-12`}>
                        <div className="gallery-block-two masonry-item">
                            <div className="inner-box">
                                <div
                                    className="image-box"
                                    style={{ cursor: "pointer" }}
                                    onClick={() => { setPhotoIndex(idx); setIsOpen(true); }}
                                >
                                    <img src={img} alt={`Gallery Image ${idx + 1}`} />
                                    <div className="overlay-box">
                                        <h6>Image {idx + 1}</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
            </div>

            {isOpen && (
                <Lightbox
                    mainSrc={images[photoIndex]}
                    nextSrc={images[(photoIndex + 1) % images.length]}
                    prevSrc={images[(photoIndex + images.length - 1) % images.length]}
                    onCloseRequest={() => setIsOpen(false)}
                    onMovePrevRequest={() =>
                        setPhotoIndex((photoIndex + images.length - 1) % images.length)
                    }
                    onMoveNextRequest={() =>
                        setPhotoIndex((photoIndex + 1) % images.length)
                    }
                />
            )}
        </>
    );
}