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";
import { cleanImage } from "../services/imageHandling";

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 = ({ productData }) => {
 
  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">
          {productData.map((item, index) => {
            const isFullWidth = index % 3 === 2;

            return (
              <Col
                key={item.id}
                xs={12}
                md={isFullWidth ? 12 : 6}
                className="mb-4"
              >
                <div className="gallery-image-wrapper">
                  <a
                    href={cleanImage(item?.image?.url)}
                    data-fancybox="gallery"
                  >
                    <Image
                      src={cleanImage(item?.image?.url)}
                      alt={`Gallery image ${item.id}`}
                      fill
                      className="gallery-image"
                    />
                  </a>
                </div>
              </Col>
            );
          })}
        </Row>
      </Container>
    </section>
  );
};

export default Gallery;