"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import { Fancybox } from "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox/fancybox.css";

interface GalleryImage {
  id: string;
  image: string;
  caption: string | null;
  sort_order: number;
  status: boolean;
}

const HistoryGallery = () => {
  const [images, setImages] = useState<GalleryImage[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchImages = async () => {
      try {
        const res = await fetch("/api/gallery");
        const json = await res.json();

        if (json.success) {
          setImages(json.data);
        }
      } catch (err) {
        console.error("Failed to load gallery images", err);
      } finally {
        setLoading(false);
      }
    };

    fetchImages();
  }, []);

  useEffect(() => {
    // (re)bind fancybox whenever the image list changes
    Fancybox.bind("[data-fancybox='history-gallery']");

    return () => {
      Fancybox.destroy();
    };
  }, [images]);

  return (
    <section className="aboutinnercontainer academycontainer certifiedstudents historygallery">
      <div className="container container-xxl">
        <div className="row">
          <div className="col-12" data-aos="fade-up" data-aos-duration="700">
            <div className="section-heading mb-3 mb-xxl-4">
              <h2>
                <span>History Gallery</span>
              </h2>
            </div>
          </div>
        </div>

        {loading && <div className="text-center py-4"></div>}

        {!loading && images.length === 0 && (
          <div className="text-center py-4">No gallery images found.</div>
        )}

        {!loading && images.length > 0 && (
          <div className="historygallery-masonry">
            {images.map((img, index) => (
              <a
                href={img.image}
                key={img.id}
                data-fancybox="history-gallery"
                data-caption={img.caption || `RKDA history photo ${index + 1}`}
                className="historygallery-masonry-item"
                data-aos="fade-up"
                data-aos-duration="700"
                data-aos-delay={(index % 3) * 150}
              >
                <Image
                  src={img.image}
                  alt={img.caption || `RKDA history photo ${index + 1}`}
                  width={0}
                  height={0}
                  sizes="(max-width: 576px) 50vw, (max-width: 992px) 33vw, 25vw"
                  style={{ width: "100%", height: "auto", display: "block" }}
                />
              </a>
            ))}
          </div>
        )}
      </div>
    </section>
  );
};

export default HistoryGallery;

















// "use client";

// import { useEffect } from "react";
// import Image from "next/image";
// import { Fancybox } from "@fancyapps/ui";
// import "@fancyapps/ui/dist/fancybox/fancybox.css";

// // Replace these with your actual image URLs/paths.
// // Add or remove entries freely - the grid handles any number of images.
// const historyGalleryImages: string[] = [
//   "https://www.rkda.org/wp-content/gallery/photo-gallery/1.jpg",
//   "https://www.rkda.org/wp-content/gallery/photo-gallery/3.jpg",
//   "https://www.rkda.org/wp-content/gallery/photo-gallery/61.jpg",
//   "https://www.rkda.org/wp-content/gallery/photo-gallery/cache/5.jpg-nggid0250-ngg0dyn-360x0-00f0w010c010r110f110r010t010.jpg",
//   "https://www.rkda.org/wp-content/gallery/photo-gallery/6.jpg",
//   "https://www.rkda.org/wp-content/gallery/photo-gallery/7.jpg",
//   "https://www.rkda.org/wp-content/gallery/photo-gallery/cache/7.jpg-nggid0253-ngg0dyn-360x0-00f0w010c010r110f110r010t010.jpg",
//   "https://www.rkda.org/wp-content/gallery/photo-gallery/cache/6.jpg-nggid0252-ngg0dyn-360x0-00f0w010c010r110f110r010t010.jpg",
//   "https://www.rkda.org/wp-content/gallery/photo-gallery/cache/8.jpg-nggid0254-ngg0dyn-360x0-00f0w010c010r110f110r010t010.jpg",
//   "https://www.rkda.org/wp-content/gallery/photo-gallery/cache/PHOTO-2020-09-13-23-05-27-4.jpg-nggid0257-ngg0dyn-360x0-00f0w010c010r110f110r010t010.jpg",
// ];

// const HistoryGallery = () => {
//   useEffect(() => {
//     Fancybox.bind("[data-fancybox='history-gallery']");

//     return () => {
//       Fancybox.destroy();
//     };
//   }, []);

//   return (
//     <section className="aboutinnercontainer academycontainer certifiedstudents historygallery">
//       <div className="container container-xxl">
//         <div className="row">
//           <div className="col-12" data-aos="fade-up" data-aos-duration="700">
//             <div className="section-heading mb-3 mb-xxl-4">
//               <h2>
//                 <span>History Gallery</span>
//               </h2>
//             </div>
//           </div>
//         </div>

//         <div className="row gx-3">
//           {historyGalleryImages.map((src, index) => (
//             <div
//               className="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-4 col-6 mb-3"
//               key={src}
//               data-aos="fade-up"
//               data-aos-duration="700"
//               data-aos-delay={(index % 3) * 150}
//             >

//               <a href={src}
//                 data-fancybox="history-gallery"
//                 data-caption={`RKDA history photo ${index + 1}`}
//                 className="certifiedstudentcar p-0 border-0 bg-transparent w-100 d-block"
//               >
//                 <div className="certifiedimg">
//                   <div className="certifiedimginner h-100">
//                     <Image
//                       src={src}
//                       alt={`RKDA history photo ${index + 1}`}
//                       width={400}
//                       height={300}
//                     />
//                   </div>
//                 </div>
//               </a>
//             </div>
//           ))}
//         </div>
//       </div>
//     </section>
//   );
// };

// export default HistoryGallery;