import "./Offers_Slider.css";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import Common_Heading_Holder from "../../common-components/common_heading_holder/Common_Heading_Holder";
import Common_Heading_Round_holder from "../../common-components/common_Heading_Round_holder/Common_Heading_Round_holder";

function Offers_Slider({ data }) {
  return (
    <section className="Offers_Slider">
      <div className="heading-wrapper">
        <Common_Heading_Round_holder headingText={"Brand Partners"} />{" "}
      </div>
      <div className="swiper-wraper">
        <Swiper
          spaceBetween={15}
          modules={[Pagination, Autoplay]}
          autoplay={{
            delay: 1500,
            disableOnInteraction: false,
            pauseOnMouseEnter: true,
          }}
          loop={true}
          className="common_swiper"
          breakpoints={{
            0: {
              slidesPerView: 3,
            },
            600: {
              slidesPerView: 4,
            },
            1400: {
              slidesPerView: 6,
            },
          }}
        >
          {data?.map((item) => (
            <SwiperSlide key={item.id}>
              <div className="img_holder">
                <img
                  src={process.env.NEXT_PUBLIC_IMG_URL + item.image}
                  className="image"
                  alt={item.name}
                />
              </div>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </section>
  );
}

export default Offers_Slider;
