import "./Offers_Slider.css";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";

function Offers_Slider({ data }) {
  return (
    <section className="Offers_Slider">
      <div className="">
        <Swiper
          spaceBetween={15}
          pagination={{
            dynamicBullets: true,
            clickable: true,
          }}
          modules={[Pagination]}
          autoplay={{ delay: 300 }}
          className="common_swiper"
          breakpoints={{
            0: {
              slidesPerView: 1.1,
            },
            600: {
              slidesPerView: 2,
            },
            1400: {
              slidesPerView: 3,
            },
          }}
        >
          {data?.data?.length > 0 &&
            data?.data?.map((item) => {
              return (
                <SwiperSlide>
                  <div className="img_holder">
                    <img
                      src={process.env.NEXT_PUBLIC_IMG_URL + item?.image}
                      className="image"
                    />
                  </div>
                </SwiperSlide>
              );
            })}
        </Swiper>
      </div>
    </section>
  );
}

export default Offers_Slider;
