"use client";

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

export interface AlbumImage {
  id: string;
  image: string;
  caption: string | null;
}

export interface Album {
  id: string;
  title: string;
  slug: string;
  images: AlbumImage[];
}

interface GalleryDetailProps {
  album: Album;
}

const GalleryDetail = ({ album }: GalleryDetailProps) => {
  useEffect(() => {
    Fancybox.bind("[data-fancybox='gallery-detail']");

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

  return (
    <section className="aboutinnercontainer academycontainer certifiedstudents">
      <div className="container container-xxl">
        <div className="row">
          <div className="col-12" data-aos="fade-up" data-aos-duration="700">
            <div className="gallery-breadcrumb mb-3 mb-xxl-4">
              <Link href="/history">History</Link> &raquo;{" "}
              <span>{album.title}</span>
            </div>
          </div>
        </div>

        <div className="row gx-3">
          {album.images.map((image, index) => (
            <div
              className="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-4 col-6 mb-3"
              key={image.id}
              data-aos="fade-up"
              data-aos-duration="700"
              data-aos-delay={index * 100}
            >
              <a
                href={image.image}
                data-fancybox="gallery-detail"
                data-caption={
                  image.caption || `${album.title} photo ${index + 1}`
                }
                className="certifiedstudentcar p-0 border-0 bg-transparent w-100 d-block"
              >
                <div className="certifiedimg">
                  <div className="certifiedimginner">
                    <Image
                      src={image.image}
                      alt={image.caption || `${album.title} photo ${index + 1}`}
                      width={280}
                      height={190}
                    />
                  </div>
                </div>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default GalleryDetail;


















// "use client";

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

// interface GalleryDetailProps {
//   album: GalleryAlbum;
// }

// const GalleryDetail = ({ album }: GalleryDetailProps) => {
//   useEffect(() => {
//     Fancybox.bind("[data-fancybox='gallery-detail']");

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

//   return (
//     <section className="aboutinnercontainer academycontainer certifiedstudents">
//       <div className="container container-xxl">
//         <div className="row">
//           <div className="col-12" data-aos="fade-up" data-aos-duration="700">
//             <div className="gallery-breadcrumb mb-3 mb-xxl-4">
//               <Link href="/history">{album.title}</Link>{" "}
//               &raquo; <span>{album.title}</span>
//             </div>
//           </div>
//         </div>

//         <div className="row gx-3">
//           {album.images.map((image, index) => (
//             <div
//               className="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-4 col-6 mb-3"
//               key={image.src}
//               data-aos="fade-up"
//               data-aos-duration="700"
//               data-aos-delay={index * 100}
//             >
              
//               <a  href={image.src}
//                 data-fancybox="gallery-detail"
//                 data-caption={image.caption || `${album.title} photo ${index + 1}`}
//                 className="certifiedstudentcar p-0 border-0 bg-transparent w-100 d-block"
//               >
//                 <div className="certifiedimg">
//                   <div className="certifiedimginner">
//                     <Image
//                       src={image.src}
//                       alt={image.caption || `${album.title} photo ${index + 1}`}
//                       width={280}
//                       height={190}
//                     />
//                   </div>
//                 </div>
//               </a>
//             </div>
//           ))}
//         </div>
//       </div>
//     </section>
//   );
// };

// export default GalleryDetail;