'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">

                {/* Column 1 */}
                <div 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" 
                                onClick={() => { setPhotoIndex(0); setIsOpen(true); }} 
                                style={{ cursor: "pointer" }}
                            >
                                <img src={images[0]} alt="Combos" />
                                <div className="overlay-box">
                                    <h6>Combos</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Column 2 */}
                <div 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" 
                                onClick={() => { setPhotoIndex(1); setIsOpen(true); }} 
                                style={{ cursor: "pointer" }}
                            >
                                <img src={images[1]} alt="Milk Shakes" />
                                <div className="overlay-box">
                                    <h6>Milk Shakes</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="gallery-block-two masonry-item">
                        <div className="inner-box">
                            <div 
                                className="image-box" 
                                onClick={() => { setPhotoIndex(2); setIsOpen(true); }} 
                                style={{ cursor: "pointer" }}
                            >
                                <img src={images[2]} alt="Poutine" />
                                <div className="overlay-box">
                                    <h6>Poutine</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Column 3 */}
                <div className="col-lg-6 col-md-12 col-sm-12">
                    <div className="row no-gutters">
                        <div className="col-lg-6 col-md-6 col-sm-12">
                            <div className="gallery-block-two masonry-item">
                                <div className="inner-box">
                                    <div 
                                        className="image-box" 
                                        onClick={() => { setPhotoIndex(3); setIsOpen(true); }} 
                                        style={{ cursor: "pointer" }}
                                    >
                                        <img src={images[3]} alt="Salads" />
                                        <div className="overlay-box">
                                            <h6>Salads</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-6 col-md-6 col-sm-12">
                            <div className="gallery-block-two masonry-item">
                                <div className="inner-box">
                                    <div 
                                        className="image-box" 
                                        onClick={() => { setPhotoIndex(4); setIsOpen(true); }} 
                                        style={{ cursor: "pointer" }}
                                    >
                                        <img src={images[4]} alt="Shawarma Wraps" />
                                        <div className="overlay-box">
                                            <h6>Shawarma Wraps</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-12 col-md-12 col-sm-12">
                            <div className="gallery-block-two masonry-item">
                                <div className="inner-box">
                                    <div 
                                        className="image-box" 
                                        onClick={() => { setPhotoIndex(5); setIsOpen(true); }} 
                                        style={{ cursor: "pointer" }}
                                    >
                                        <img src={images[5]} alt="Dosa" />
                                        <div className="overlay-box">
                                            <h6>Dosa</h6>
                                        </div>
                                    </div>
                                </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)
                    }
                />
            )}
        </>
    );
}