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

export default function GalleryPage() {
    const images = [
        "/assets/images/home/categories/combos.webp",
        "/assets/images/home/categories/milkshakes.webp",
        "/assets/images/home/categories/poutine.webp",
        "/assets/images/home/categories/salads.webp",
        "/assets/images/home/categories/shawarma.webp",
        "/assets/images/home/categories/dosa.webp"
    ];

    const [isOpen, setIsOpen] = useState(false);
    const [photoIndex, setPhotoIndex] = useState(0);

    return (
        <Layout 
            headerStyle={2} 
            footerStyle={2} 
            breadcrumbTitle="Gallery" 
            bgImage="/assets/images/about/about-banner.webp"
        >
            {/* Gallery Section Two */}
            <section className="gallery-section-two sec-pad" id="gallery">
                <div className="outer-container">
                    <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>
                </div>
            </section>
            {/* End Gallery Section Two */}

            {/* Lightbox */}
            {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)
                    }
                />
            )}
        </Layout>
    );
}