import "../offers_slider/Offers_Slider.css";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "./ComingSoon.css";
function ComingSoon({ comingbanner }) {
  return (
    <section className="Banner coming-soon-banner">
      <Swiper
        spaceBetween={15}
        pagination={{
          dynamicBullets: true,
          clickable: true,
        }}
        autoplay={{
          delay: 2500,
          disableOnInteraction: false,
        }}
        loop={true}
        modules={[Autoplay, Pagination]}
        className="banner_swiper"
        breakpoints={{
          0: {
            slidesPerView: 1,
          },
          768: {
            slidesPerView: 1,
          },
        }}
      >
        {comingbanner?.map((val, index) => {
          const mediaUrl = process.env.NEXT_PUBLIC_IMG_URL + val?.image;

          // Detect video by extension
          const isVideo = /\.(mp4|webm|ogg|mov)$/i.test(mediaUrl);

          return (
            <SwiperSlide key={index}>
              {/* <div className="img_holder" onClick={handleBannerClick}> */}
              <div
                className="img_holder"
                onClick={() => handleBannerClick(val?.category_id)}
              >
                {isVideo ? (
                  <video
                    className="image"
                    src={mediaUrl}
                    autoPlay
                    muted
                    loop
                    playsInline
                  />
                ) : (
                  <img
                    src={mediaUrl}
                    alt={`Banner ${index + 1}`}
                    className="image"
                  />
                )}
              </div>
            </SwiperSlide>
          );
        })}
      </Swiper>
    </section>
  );
}

export default ComingSoon;
