// Gallery.js

import React, { useState } from "react";
import "./Gallery.css";

const Gallery = ({ images }) => {
  const [modalImage, setModalImage] = useState(null);

  const openModal = (image) => {
    setModalImage(image);
  };

  const closeModal = () => {
    setModalImage(null);
  };

  return (
    <div className="gallery-container">
      {images.map((image, index) => (
        <img
          key={index}
          src={image}
          alt={`Image ${index}`}
          className="gallery-image"
          onClick={() => openModal(image)}
        />
      ))}

      {modalImage && (
        <div className="modal" onClick={closeModal}>
          <span className="close-button">&times;</span>
          <img src={modalImage} alt="Full Size" />
        </div>
      )}
    </div>
  );
};

export default Gallery;