import React, { useRef } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { Container, Row, Col } from "react-bootstrap";
import FadeInStagger from "@/components/FadeInStagger";
import Heading from "@/components/Heading";

const CollectionData = [
  { image: "/image/project.png", title: "The Imperial – Mumbai" },
  { image: "/image/project.png", title: "Azure Heights – Bengaluru" },
  { image: "/image/project.png", title: "The Imperial – Mumbai" },
  { image: "/image/project.png", title: "Azure Heights – Bengaluru" },
];

const ProjectSlider = () => {
  const prevRef = useRef(null);
  const nextRef = useRef(null);

  return (
    <div className="project-section py-5 position-relative">
      <Container className="custom_container">
        {/* Heading */}
        <Row className="text-md-center mb-4">
          <Col lg={12} md={12}>
            <FadeInStagger direction="top">
              <Heading el="h2" heading="Projects" />
            {/* <h2 className="heading mb-2">Projects</h2> */}
            <p className="mb-0 gray-text">
             Over the years, Akruti Lux Contract has carried out hundreds of projects 
            </p>
             <p className="mb-0 gray-text">
             in different sectors all over the world.
            </p>
            </FadeInStagger>
          </Col>
        </Row>

        {/* Swiper */}
        <Swiper
          slidesPerView={4}
          spaceBetween={30}
          autoplay={{ delay: 5000, disableOnInteraction: false }}
          speed={1000}
          loop={true}
          // pagination={{ clickable: true }}
          navigation={{
            nextEl: ".cust-swiper-button-next",
            prevEl: ".cust-swiper-button-prev",
          }}
          modules={[Navigation, Autoplay]}
          className="projectSwiper pb-5"
          breakpoints={{
            320: { slidesPerView: 1, spaceBetween: 15 },
            640: { slidesPerView: 1.5, spaceBetween: 20 },
            992: { slidesPerView: 1.5, spaceBetween: 25 },
            1200: { slidesPerView: 1.5, spaceBetween: 30 },
          }}
        >
          {CollectionData.map((item, index) => (
            <SwiperSlide key={index}>
              <div className="project-card">
                <img
                  src={item.image}
                  alt={item.title}
                  className="img-fluid rounded-lg hover-zoom"
                />
                <p className="mt-3">{item.title}</p>
              </div>
            </SwiperSlide>
          ))}
        </Swiper>
          {/* <div className="d-flex gap-2">
              <button className="cust-swiper-button-prev">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="48"
                  height="48"
                  viewBox="0 0 48 48"
                  fill="none"
                >
                  <rect
                    y="48"
                    width="48"
                    height="48"
                    rx="24"
                    transform="rotate(-90 0 48)"
                    fill="white"
                    fill-opacity="0.25"
                  />
                  <rect
                    x="0.5"
                    y="47.5"
                    width="47"
                    height="47"
                    rx="23.5"
                    transform="rotate(-90 0.5 47.5)"
                    stroke="black"
                    stroke-opacity="0.2"
                  />
                  <path
                    d="M20.6667 31L22.4375 29.1406L18.7917 25.3125H34V22.6875H18.7917L22.4375 18.8594L20.6667 17L14 24L20.6667 31Z"
                    fill="black"
                  />
                </svg>
              </button>
              <button className="cust-swiper-button-next">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="48"
                  height="48"
                  viewBox="0 0 48 48"
                  fill="none"
                >
                  <rect
                    width="48"
                    height="48"
                    rx="24"
                    transform="matrix(0 -1 -1 0 48 48)"
                    fill="white"
                    fill-opacity="0.25"
                  />
                  <rect
                    x="-0.5"
                    y="-0.5"
                    width="47"
                    height="47"
                    rx="23.5"
                    transform="matrix(0 -1 -1 0 47 47)"
                    stroke="black"
                    stroke-opacity="0.2"
                  />
                  <path
                    d="M27.3333 31L25.5625 29.1406L29.2083 25.3125H14V22.6875H29.2083L25.5625 18.8594L27.3333 17L34 24L27.3333 31Z"
                    fill="black"
                  />
                </svg>
              </button>
            </div> */}
        <Row className="">
          <Col className="d-flex justify-content-center" ><button className="btn3">View More <i className="fa-solid fa-arrow-right"></i></button></Col>
        </Row>
      </Container>

      {/* Swiper buttons outside container */}
      <div className="position-absolute swiperbtn1 d-lg-flex d-none justify-content-between px-5 align-items-center w-100">
        {/* Attach refs to buttons */}
        <button className="cust-swiper-button-prev">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="48"
                  height="48"
                  viewBox="0 0 48 48"
                  fill="none"
                >
                  <rect
                    y="48"
                    width="48"
                    height="48"
                    rx="24"
                    transform="rotate(-90 0 48)"
                    fill="white"
                    fill-opacity="0.25"
                  />
                  <rect
                    x="0.5"
                    y="47.5"
                    width="47"
                    height="47"
                    rx="23.5"
                    transform="rotate(-90 0.5 47.5)"
                    stroke="black"
                    stroke-opacity="0.2"
                  />
                  <path
                    d="M20.6667 31L22.4375 29.1406L18.7917 25.3125H34V22.6875H18.7917L22.4375 18.8594L20.6667 17L14 24L20.6667 31Z"
                    fill="black"
                  />
                </svg>
              </button>
              <button className="cust-swiper-button-next">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="48"
                  height="48"
                  viewBox="0 0 48 48"
                  fill="none"
                >
                  <rect
                    width="48"
                    height="48"
                    rx="24"
                    transform="matrix(0 -1 -1 0 48 48)"
                    fill="white"
                    fill-opacity="0.25"
                  />
                  <rect
                    x="-0.5"
                    y="-0.5"
                    width="47"
                    height="47"
                    rx="23.5"
                    transform="matrix(0 -1 -1 0 47 47)"
                    stroke="black"
                    stroke-opacity="0.2"
                  />
                  <path
                    d="M27.3333 31L25.5625 29.1406L29.2083 25.3125H14V22.6875H29.2083L25.5625 18.8594L27.3333 17L34 24L27.3333 31Z"
                    fill="black"
                  />
                </svg>
              </button>
      </div>
    </div>
  );
};

export default ProjectSlider;