// import Navbar from "@user/Navbar";
// import Hero from "@user/Hero";
// import { useState } from "react";
// import { Head } from "@inertiajs/react"
// // import Lightbox from "react-image-lightbox";
// // import 'react-image-lightbox/style.css';

// export default function Gallery({gallery}){
//     const [isOpen, setIsOpen] = useState(false);
//     const images = gallery.map(item => `/storage/${item.photo}`);
//     const [photoIndex, setPhotoIndex] = useState(0);
//     return(
//         <>
//         <Head title="Gallary" />
//         <div className="container-fluid position-relative p-0">
//             <Navbar activePage="gallery" />
//             <Hero 
//                 title="Gallery" 
//                 breadcrumb={[
//                     { label: "Home", href: "/" },
//                     { label: "Gallery" }
//                 ]}
//             />
//         </div>

//         <div className="container-xxl py-5">
//         <div className="container">
//           <div className="text-center wow fadeInUp" data-wow-delay="0.1s">
//             <h6 className="section-title bg-white text-center text-primary px-3">Gallery</h6>
//             <h1 className="mb-5">Our Gallery</h1>
//           </div>
//           <div className="row g-4 justify-content-center">
//             {gallery.map((item, index) => (
//               <div
//                 key={index}
//                 className="col-lg-4 col-md-6 wow fadeInUp"
//                 data-wow-delay="0.1s"
//               >
//                 <div
//                   className="gallery-item position-relative d-block overflow-hidden"
//                   style={{ cursor: "pointer" }}
//                   onClick={() => {
//                     setIsOpen(true);
//                     setPhotoIndex(index);
//                   }}
//                 >
//                   <img
//                     className="img-fluid"
//                     src={`/storage/${item.photo}`}
//                     alt=""
//                   />
//                   <div className="bg-white text-primary fw-bold position-absolute bottom-0 end-0 m-3 py-1 px-2">
//                     {item?.title}
//                   </div>
//                 </div>
//               </div>
//             ))}
//           </div>
//         </div>
//       </div>

//       {/* Lightbox Modal */}
//       {/* {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)
//         }
//         imageCaption={gallery[photoIndex]?.caption} 
//         imageTitle={gallery[photoIndex]?.title}
//       />
//       )} */}
//         </>
//     );
// }