Gallery

import Lightbox from "../components/Lightbox"
import { Col, Row } from "react-bootstrap"
import Image from "../components/CustomImage"

export default function page(props) {

  const data = [
    {
      "img": "/img1.jpg",
      "caption": {
        "title": "Image 1",
        "text": "Image sample text"
      }
    },
    {
      "img": "/img2.jpg",
      "caption": {
        "title": "Image 2",
        "text": "Image sample text"
      }
    },
    {
      "img": "/img3.jpg",
      "caption": {
        "title": "Image 3",
        "text": "Image sample text"
      }
    },
  ]

  // Lightbox state
  const [lightBoxOpen, setLightBoxOpen] = useState(false)

  // Active image state
  const [activeImage, setActiveImage] = useState(0)

  // On image click
  const onClick = (index) => {
    setActiveImage(index) // Set current active image
    setLightBoxOpen(!lightBoxOpen) // Open lightbox
  }

  return(
    <Row>
      {data.map((item, index) => (
        <Col xs={6} key={index}>
          <Image
            src={item.img}
            alt={item.caption.title}
            layout="responsive"
            width={600}
            height={400}
            onClick={() => onClick(index)}
          />
        </Col>
      ))}

      <Lightbox
        open={lightBoxOpen}
        close={() => setLightBoxOpen(false)}
        slides={data?.map((image) => ({
          alt: image.caption.title,
          src: image.img,
        }))}
        index={activeImage}
      />
    </Row>
  )
}