'use client'
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";
import { images } from "@/utility/constant.utils";
import { useState } from "react";

export default function Section3() {
  // Show only images with id 1 to 4
  const selectedImages = images.filter(img => +img.id >= 13 && +img.id <= 16);

  const [open, setOpen] = useState(false);
  const [index, setIndex] = useState(0);

  return (
    <div className="about6-section-area sp4">
      <div className="container-fluid">
        <div className="row align-items-center">
          {selectedImages.map((img, i) => (
            <div className="col-lg-3 col-md-3 col-sm-12 col-6 event-img" key={img.id}>
              <div
                className="memory-boxarea pl-3"
                style={{ cursor: "pointer" }}
                onClick={() => {
                  setIndex(i);
                  setOpen(true);
                }}
              >
                <div className="image" data-aos="zoom-in" data-aos-duration={1000}>
                  <img src={img.src} alt={img.alt} style={{ width: "100%", borderRadius: 8 }} />
                </div>
              </div>
            </div>
          ))}
        </div>
        <Lightbox
          open={open}
          close={() => setOpen(false)}
          slides={selectedImages}
          index={index}
        />
      </div>
    </div>
  );
}