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>
      ))}

      {lightBoxOpen && (
        <Lightbox
          data={data} // Passing data to lightbox component
          activeImage={activeImage} // Passing active image state to lightbox component
          setActiveImage={setActiveImage} // Passing setActiveImage to change active image
          setLightBoxOpen={() => setLightBoxOpen()} // Passing setLightBoxOpen for closing lightbox
        />
      )}
    </Row>
  )
}