"use client";
import { useState } from "react";
import { GalleryImages } from "../../utils/constant.utils";

const VilakkuPoojaiGallery = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [imageSrc, setImageSrc] = useState("");

  // Open Lightbox
  const openLightbox = (src) => {
    setImageSrc(src);
    setIsOpen(true);
  };

  // Close Lightbox
  const closeLightbox = () => {
    setIsOpen(false);
    setImageSrc("");
  };

  return (
    <div className="portfolio-area-1 space-bottom">
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-lg-5">
            <div className="title-area text-center">
              <h2 className="sec-title">Gallery</h2>
            </div>
          </div>
        </div>

        {/* Show only 6 images */}
        <div className="row gy-30 gx-30">
          {GalleryImages.slice(7, 13).map((image, index) => (
            <div key={index} className="col-lg-4 col-md-6">
              <div className="portfolio-card image-container">
                <div className="portfolio-card-thumb">
                  <img
                    src={image.src}
                    alt="Gallery"
                    onClick={() => openLightbox(image.src)}
                    style={{ cursor: "pointer" }}
                  />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Lightbox Modal */}
      {isOpen && (
        <div className="custom-modal_popup">
          <span className="close-button" onClick={closeLightbox}>
            &times;
          </span>
          <img src={imageSrc} alt="Fullsize" />
        </div>
      )}
    </div>
  );
};

export default VilakkuPoojaiGallery;
