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

import "swiper/css";
import "swiper/css/pagination";

function Offers_Slider({ data }) {
  return (
    <section className="Offers_Slider">
      <Swiper
        spaceBetween={8}
        modules={[Pagination, Autoplay]}
        autoplay={{
          delay: 2000,
          disableOnInteraction: false,
          pauseOnMouseEnter: true,
        }}
        loop={true}
        className="common_swiper"
        breakpoints={{
          0: {
            slidesPerView: 1.1,
          },
          480: { slidesPerView: 1.5 },
          600: {
            slidesPerView: 1.2,
          },
          767: {
            slidesPerView: 2,
          },
          992: {
            slidesPerView: 2.8,
          },
          1400: {
            slidesPerView: 3,
          },
        }}
      >
        {data?.data?.map((item, index) => (
          <SwiperSlide key={index}>
            <div className="img_holder">
              <img
                src={process.env.NEXT_PUBLIC_IMG_URL + item?.image}
                className="image"
                alt=""
              />
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </section>
  );
}

export default Offers_Slider;
