import "swiper/css/effect-fade";
import "./Banner.css";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import { Pagination, Autoplay } from "swiper/modules";

function Banner({ banner }) {
  return (
    <section className="Banner">
      <Swiper
        spaceBetween={15}
        pagination={{
          dynamicBullets: true,
          clickable: true,
        }}
        autoplay={{
          delay: 2500,
          disableOnInteraction: false,
        }}
        modules={[Autoplay, Pagination]}
        className="banner_swiper"
        breakpoints={{
          0: {
            slidesPerView: 1,
          },
        }}
      >
        {banner?.map((val) => (
          <SwiperSlide>
            <div className="img_holder">
              <img
                src={process.env.NEXT_PUBLIC_IMG_URL + val?.image}
                className="image"
              />
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </section>
  );
}

export default Banner;
