// // ─── Banner Slider ────────────────────────────────────────────────────────────

// import { Swiper, SwiperSlide } from "swiper/react";
// import { Pagination, Autoplay,Navigation } from "swiper/modules";

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

// const BannerSlider = () => {
//   return (
//     <section className="bannercontainer">
//       <Swiper
//         modules={[Pagination, Autoplay]}
//         slidesPerView={1}
//         loop={true}
//         autoplay={{
//           delay: 4000,
//           disableOnInteraction: false,
//         }}
//         pagination={{
//           clickable: true,
//         }}
//         className="mySwiper"
//       >
//         {[1, 2, 3, 4].map((item) => (
//           <SwiperSlide key={item}>
//             <div className="relative">
//               <picture>
//                 <source
//                   media="(max-width:575px)"
//                   srcSet="/images/banner-1.webp"
//                 />

//                 <img
//                   alt="Banner"
//                   loading="lazy"
//                   src="/images/banner-1.webp"
//                   className="w-full"
//                 />
//               </picture>

//               <div className="bannercaption absolute inset-0 flex items-center">
//                 <div className="mx-auto w-full px-3">
//                   <div className="flex flex-wrap -mx-3">
//                     <div className="2xl:w-1/2 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 text-white">
//                         <h1 className="text-4xl font-bold">
//                           Take Home
//                           <span className="block">
//                             A Memorable Attire
//                           </span>
//                           <span className="block">
//                             for the most special day
//                           </span>
//                         </h1>

//                         <a
//                           className="theme-btn inline-block mt-4"
//                           href="#"
//                         >
//                           Shop Now
//                         </a>
//                       </div>
//                     </div>
//                   </div>
//                 </div>
//               </div>
//             </div>
//           </SwiperSlide>
//         ))}
//       </Swiper>
//     </section>
//   );
// };

// export default BannerSlider







"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;
  isActive: boolean;
};

const BannerSlider = ({
  sliders,
}: {
  sliders: Slider[];
}) => {
  const activeSliders =
    sliders?.filter((s) => s.isActive) ?? [];



  return (
    <section className="bannercontainer relative overflow-hidden">

      <Swiper
        modules={[Pagination, Autoplay]}
        slidesPerView={1}
        loop={activeSliders.length > 1}
        autoplay={{ delay: 4000, disableOnInteraction: false }}
        pagination={{ clickable: true }}
        className="mySwiper"
      >
        {activeSliders.map((slider) => (
          <SwiperSlide key={slider._id}>
            <div className="relative">
              <picture>
                <img
                  src={slider.image}
                  alt={slider.title}
                  loading="lazy"
                  className="w-full"
                  style={{ width: "100%", height: "600px", objectFit: "cover", display: "block" }}
                />
              </picture>

              {/* OVERLAY */}
              <div className="absolute inset-0 bg-black/30"></div>

              {/* CONTENT */}
              <div className="bannercaption absolute inset-0 flex items-center">
                <div className="mx-auto w-full px-3">
                  <div className="flex flex-wrap -mx-3">
                    <div className="2xl:w-1/2 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 text-white">
                        <h1 className="text-4xl font-bold">
                          {slider.title}
                          {slider.sub_title && (
                            <span className="block">{slider.sub_title}</span>
                          )}
                        </h1>

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


      {/* CUSTOM PAGINATION */}
      <div className="swiper-pagination-home-banner absolute bottom-6 left-1/2 z-20 -translate-x-1/2"></div>

      {/* STYLES */}
      <style jsx global>{`
        .swiper-pagination-home-banner {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
        }

        .swiper-pagination-home-banner
          .swiper-pagination-bullet {
          width: 10px;
          height: 10px;
          background: white;
          opacity: 0.5;
          transition: all 0.3s ease;
        }

        .swiper-pagination-home-banner
          .swiper-pagination-bullet-active {
          opacity: 1;
          background: #f59e0b;
          transform: scale(1.2);
        }

        .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;