"use client";
import React, { useState } from "react";
import { X } from "lucide-react";
import Image from "next/image";

const CertificationGallerySection = () => {
  const [selectedImage, setSelectedImage] = useState(null);

  const images = [
    "/certification/gallery10.jpeg",
    "/certification/gallery5.png",
    "/certification/gallery12.jpeg",
    "/certification/gallery11.jpeg",
  ];

  const handleImageClick = (index) => {
    setSelectedImage(index);
  };

  const handleClosePopup = () => {
    setSelectedImage(null);
  };

  return (
    <div className="container mx-auto max-w-6xl px-4 py-8">
      <h2 className="text-3xl sm:text-5xl font-bold mb-6 text-center">
        Chamber of Commerce
      </h2>

      <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-4">
        {images.slice(0, 3).map((src, index) => (
          <div key={index} className="aspect-w-1 aspect-h-1">
            <Image
              src={src}
              alt={`Gallery image ${index + 1}`}
              // layout="responsive"
              width={500} // Adjust based on your desired image width
              height={500} // Adjust based on your desired image height
              className="object-cover w-full h-full cursor-pointer"
              onClick={() => handleImageClick(index)}
            />
          </div>
        ))}
      </div>

      <div className="aspect-w-4 aspect-h-2">
        <Image
          src={images[3]}
          alt="Gallery image 5"
          layout="responsive"
          width={800} // Adjust based on your desired image width
          height={400} // Adjust based on your desired image height
          className="object-cover w-full h-full cursor-pointer"
          onClick={() => handleImageClick(4)}
        />
      </div>

      {selectedImage !== null && (
        <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
          <div className="relative max-w-3xl w-full">
            <Image
              src={images[selectedImage]}
              alt={`Gallery image ${selectedImage + 1}`}
              width={1200} // Adjust based on your desired image width
              height={800} // Adjust based on your desired image height
              className="w-full h-auto"
            />
            <button
              onClick={handleClosePopup}
              className="absolute top-4 right-4 text-yellow-400"
            >
              <X size={24} />
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default CertificationGallerySection;