"use client";

import { useState } from "react";
import Image from "next/image";

// 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/cache/1.jpg-nggid0246-ngg0dyn-360x0-00f0w010c010r110f110r010t010.jpg",
  "https://www.rkda.org/wp-content/gallery/photo-gallery/cache/2.jpeg-nggid0247-ngg0dyn-360x0-00f0w010c010r110f110r010t010.jpeg",
  "https://www.rkda.org/wp-content/gallery/photo-gallery/cache/3.jpg-nggid0248-ngg0dyn-360x0-00f0w010c010r110f110r010t010.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/cache/61.jpg-nggid0251-ngg0dyn-360x0-00f0w010c010r110f110r010t010.jpg",
  "https://www.rkda.org/wp-content/gallery/photo-gallery/cache/4.jpg-nggid0249-ngg0dyn-360x0-00f0w010c010r110f110r010t010.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 = () => {
  const [activeImage, setActiveImage] = useState<string | null>(null);

  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}
              >
                <button type="button" className="certifiedstudentcar p-0 border-0 bg-transparent w-100" onClick={() => setActiveImage(src)} >
                  <div className="certifiedimg">
                    <div className="certifiedimginner h-100">
                      <Image
                        src={src}
                        alt={`RKDA history photo ${index + 1}`}
                        width={400}
                        height={300}
                      />
                    </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="RKDA history photo"
              width={900}
              height={600}
            //   style={{ width: "100%", height: "auto" }}
            />
          </div>
        </div>
      )}
    </>
  );
};

export default HistoryGallery;