import React, { useEffect } from "react";
import { Col, Container, Row } from "react-bootstrap";
import Heading from "@/components/Heading";
import Image from "next/image";
import { Fancybox } from "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox/fancybox.css";

const galleryData = [
  { id: 1, src: "/image/gallery/01.png", col: 6 },
  { id: 2, src: "/image/gallery/02.png", col: 6 },
  { id: 3, src: "/image/gallery/03.png", col: 12 },
  { id: 4, src: "/image/gallery/04.png", col: 6 },
  { id: 5, src: "/image/gallery/05.png", col: 6 },
];

const Gallery = () => {
  useEffect(() => {
    Fancybox.bind("[data-fancybox='gallery']", {
      Hash: false,
      Thumbs: false,
    });

    return () => {
      Fancybox.destroy();
    };
  }, []);

  return (
    <section className="gallery-section sec_padd">
      <Container className="custom_container">

        <Row>
          <Col className="d-flex justify-content-center">
            <Heading el="h2" heading="Gallery" />
          </Col>
        </Row>

        <Row className="gallery-items">
          {galleryData.map((item) => (
            <Col key={item.id} xs={item.col} className="mb-4">
              <div className="gallery-image-wrapper">
                <a
                  href={item.src}
                  data-fancybox="gallery"
                >
                  <Image
                    src={item.src}
                    alt={`Gallery image ${item.id}`}
                    fill
                    className="gallery-image"
                  />
                </a>
              </div>
            </Col>
          ))}
        </Row>

      </Container>
    </section>
  );
};

export default Gallery;