text: import React, { useState } from "react";
  import PropTypes from "prop-types";
  import Carousel, { Modal, ModalGateway } from "react-images";
  
  const Gallery = ({ images }) => {
    const [lightboxIsOpen, setLightboxIsOpen] = useState(false);
    const [selectedIndex, setSelectedIndex] = useState(0);
  
    const toggleLightbox = (selectedIndex) => {
      setLightboxIsOpen(!lightboxIsOpen);
      setSelectedIndex(selectedIndex);
    };
  
    const renderGallery = (images) => {
      if (!images) return;
  
      const gallery = images.map((obj, i) => {
        return (
          <article className="6u 12u$(xsmall) work-item" key={i}>
            <a
              className="image fit thumb"
              href={obj.source}
              title={obj.caption}
              onClick={(e) => {
                e.preventDefault();
                toggleLightbox(i);
              }}
            >
              <img src={obj.thumbnail} alt={obj.caption} />
            </a>
  
            <h3>{obj.caption}</h3>
            <p>{obj.description}</p>
          </article>
        );
      });
  
      return <div className="row">{gallery}</div>;
    };
  
    return (
      <div>
        {renderGallery(images)}
        <ModalGateway>
          {lightboxIsOpen && (
            <Modal onClose={toggleLightbox}>
              <Carousel currentIndex={selectedIndex} views={images} />
            </Modal>
          )}
        </ModalGateway>
      </div>
    );
  };
  
  Gallery.displayName = "Gallery";
  Gallery.propTypes = {
    images: PropTypes.array,
  };
  
  export default Gallery;
  