"use client";

import { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { GalleryAlbum } from "@/lib/Galleryalbums";

interface GalleryDetailProps {
  album: GalleryAlbum;
}

const GalleryDetail = ({ album }: GalleryDetailProps) => {
  const [activeImage, setActiveImage] = useState<string | null>(null);

  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}
              >
                <button
                  type="button"
                  className="certifiedstudentcar p-0 border-0 bg-transparent w-100"
                  onClick={() => setActiveImage(image.src)}
                >
                  <div className="certifiedimg">
                    <div className="certifiedimginner">
                      <Image
                        src={image.src}
                        alt={image.caption || `${album.title} photo ${index + 1}`}
                        width={280}
                        height={190}
                      />
                    </div>
                  </div>
                </button>
              </div>
            ))}
          </div>
        </div>
      </section>

      {activeImage && (
        <div
          className="gallery-lightbox-overlay"
          onClick={() => setActiveImage(null)}
        >
          <button
            type="button"
            className="gallery-lightbox-close"
            onClick={() => setActiveImage(null)}
            aria-label="Close"
          >
            &times;
          </button>
          <div
            className="gallery-lightbox-content"
            onClick={(e) => e.stopPropagation()}
          >
            <Image
              src={activeImage}
              alt={album.title}
              width={900}
              height={600}
              style={{ width: "100%", height: "auto" }}
            />
          </div>
        </div>
      )}
    </>
  );
};

export default GalleryDetail;