"use client";

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

type Slider = {
  _id: string;
  title: string;
  sub_title?: string;
  image: string;
  button_text?: string;
  button_link?: string;
  link?: string;
  isActive: boolean;
};

const BannerSlider = ({
  sliders,
}: {
  sliders: Slider[];
}) => {
  const activeSliders =sliders;
  return (
    <section className="bannercontainer relative overflow-hidden">

      <Swiper
        modules={[Pagination, Autoplay]}
        slidesPerView={1}
        loop={activeSliders.length > 1}
        // autoplay={{ delay: 6000, disableOnInteraction: false }}
        autoplay={false}
        pagination={{
          el: ".swiper-pagination-home-banner",
          clickable: true,
          type: 'bullets', 
          dynamicBullets: true
        }}
        className="mySwiper"
      >
        {activeSliders.map((slider) => (
          <SwiperSlide key={slider._id}>
            <picture>
              <img
                src={slider.image}
                alt={slider.title}
                loading="lazy"
                className="w-full"
              />
            </picture>
            {/* CONTENT */}
            <div className="bannercaption absolute inset-0 flex items-center">
              <div className="container container-xxl px-3">
                <div className="flex flex-wrap -mx-3">
                  <div className="2xl:w-7/12 xl:w-1/2 lg:w-2/3 md:w-2/3 sm:w-1/2 w-3/4 px-3">
                    <div className="captioninner text-left">
                      <h1>
                        {slider.title}
                        {slider.sub_title && (
                          <span className="block">{slider.sub_title}</span>
                        )}
                      </h1>

                      {slider.button_text && (
                        <a
                          href={slider.link || "#"}
                          className="theme-btn"
                        >
                          {slider.button_text}
                        </a>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
          </SwiperSlide>
        ))}
      </Swiper>


      {/* CUSTOM PAGINATION */}
     <div className="swiper-pagination swiper-pagination-home-banner"></div>


      {/* STYLES */}
      {/* <style jsx global>{`
       

     
    

        .swiper-button-prev-home-banner::after,
        .swiper-button-next-home-banner::after {
          display: none;
        }

        @media (max-width: 768px) {
          .swiper-button-prev-home-banner,
          .swiper-button-next-home-banner {
            width: 40px;
            height: 40px;
          }
        }
      `}</style> */}
    </section>
  );
};

export default BannerSlider;