"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay, Pagination } from "swiper/modules";

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

import FreeClassText from "@/images/free-class-text.png";
import FreeClassText2 from "@/images/free-class-text-2.png";
import FreeBadgeLogo from "@/images/free-badge-logo.svg";
import BadgeBt from "@/images/badge-bt.png";
import axiosInstance from "@/lib/axiosInstance";

interface BannerData {
  id: number;
  banner_name: string;
  banner_sub_text: string | null;
  banner_text: string | null;
  desktop_banner: string | null;
  tab_banner: string | null;
  mobile_banner: string | null;
}

export default function Banner() {
  const [banners, setBanners] = useState<BannerData[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchBanners = async () => {
      try {
        const response = await axiosInstance.get("/cms/banners?page=home");
        const result = response.data;

        if (result.success) {
          setBanners(result.data || []);
        }
      } catch (error) {
        console.error(error);
      } finally {
        setLoading(false);
      }
    };

    fetchBanners();
  }, []);

  if (banners.length === 0) return null;

  return (
    <section className="bannercontainer">
      <Swiper
        id="HomeBanner"
        modules={[Navigation, Pagination, Autoplay]}
        autoplay={{
          delay: 3000,
        }}
        loop={true}
        speed={1000}
        pagination={{
          el: ".swiper-pagination-home-banner",
          clickable: true,
          type: "bullets",
          dynamicBullets: true,
        }}
        navigation={{
          nextEl: ".swiper-button-next-home-banner",
          prevEl: ".swiper-button-prev-home-banner",
          addIcons: false,
        }}
        className="swiper"
      >
        {banners.map((banner, index) => (
          <SwiperSlide key={banner.id} className="swiper-slide">
            <picture>
              {banner.mobile_banner && (
                <source
                  media="(max-width:575px)"
                  srcSet={banner.mobile_banner}
                />
              )}

              {banner.tab_banner && (
                <source
                  media="(max-width:767px)"
                  srcSet={banner.tab_banner}
                />
              )}

              {banner.desktop_banner && (
                <Image
                  src={banner.desktop_banner}
                  alt={banner.banner_name}
                  width={1351}
                  height={468}
                  priority={index === 0}
                />
              )}

              <div className="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
            </picture>

            <div className="bannercaption">
              <div className="container">
                <div className="row">
                  <div className="col-xxl-6 col-xl-6 col-lg-6 col-md-8 col-sm-8 col-10">
                    <div className="captioninner text-start">
                      <h1>{banner.banner_name}</h1>

                      {banner.banner_sub_text && (
                        <div className="bannersubheading">
                          {banner.banner_sub_text}
                        </div>
                      )}

                      {banner.banner_text && <p>{banner.banner_text}</p>}

                      <div className="d-flex gap-2 gap-xxl-3">

                        <a href="javascript:void(0);"
                          className="default-btn"
                        >
                          Join Classes
                        </a>


                        <a href="javascript:void(0);"
                          className="theme-btn"
                        >
                          Watch Performances
                        </a>
                      </div>

                      <div className="freeclassbadge">
                        <div className="freebadgeicon">
                          <Image
                            src={index % 2 === 0 ? FreeClassText2 : FreeClassText}
                            alt=""
                          />

                          <span>
                            <Image
                              src={FreeBadgeLogo}
                              alt=""
                            />
                          </span>
                        </div>

                        <Image
                          src={BadgeBt}
                          alt="Free Virtual Classes"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </SwiperSlide>
        ))
        }
      </Swiper >

      <div className="swiper-nav">
        <div className="container container-xxl">
          <div className="d-flex swiper-banner-nav justify-content-end justify-content-lg-between">
            <div className="swiper-button-prev swiper-button-prev-home-banner"></div>
            <div className="swiper-button-next swiper-button-next-home-banner"></div>
          </div>
        </div>
      </div>
    </section >
  );
}



// "use client";

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

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

// import Banner1 from "@/images/banner-1.webp";
// import MobileBanner420 from "@/images/mobile-banner-420.webp";
// import MobileBanner767 from "@/images/mobile-banner-767.webp";
// import FreeClassText from "@/images/free-class-text.png";
// import FreeClassText2 from "@/images/free-class-text-2.png";
// import FreeBadgeLogo from "@/images/free-badge-logo.svg";
// import BadgeBt from "@/images/badge-bt.png";

// export default function Banner() {
//   return (
//     <section className="bannercontainer">
//       <Swiper
//         id="HomeBanner"
//         modules={[Navigation, Pagination, Autoplay]}
//         autoplay={{
//           delay: 3000,
//         }}
//         loop={true}
//         speed={1000}
//         pagination={{
//           el: ".swiper-pagination-home-banner",
//           clickable: true,
//           type: "bullets",
//           dynamicBullets: true,
//         }}
//         navigation={{
//           nextEl: ".swiper-button-next-home-banner",
//           prevEl: ".swiper-button-prev-home-banner",
//           addIcons: false,
//         }}
//         className="swiper"
//       >
//         <SwiperSlide className="swiper-slide">
//           <picture>
//             <source
//               media="(max-width:575px)"
//               srcSet={MobileBanner420.src}
//             />
//             <source
//               media="(max-width:767px)"
//               srcSet={MobileBanner767.src}
//             />

//             <Image
//               src={Banner1}
//               alt="Banner 1"
//               width={1351}
//               height={468}
//               priority
//             />

//             <div className="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
//           </picture>

//           <div className="bannercaption">
//             <div className="container">
//               <div className="row">
//                 <div className="col-xxl-6 col-xl-6 col-lg-6 col-md-8 col-sm-8 col-10">
//                   <div className="captioninner text-start">
//                     <h1>The National Kuchipudi Training Academy</h1>

//                     <div className="bannersubheading">
//                       A Breakthrough in Kuchipudi Pedagogy
//                     </div>

//                     <p>
//                       A research-driven training system, based on the scientific
//                       interpretation of Natya Shastra (Vedic literature) and
//                       documented in two training manuals refined over 20 years,
//                       enables students—including adults—to develop full-body
//                       flexibility within ~3 years, unlike the usual 10yrs.
//                     </p>

//                     <div className="d-flex gap-2 gap-xxl-3">
//                       <a
//                         href="javascript:void(0);"
//                         className="default-btn"
//                       >
//                         Join Classes
//                       </a>

//                       <a
//                         href="javascript:void(0);"
//                         className="theme-btn"
//                       >
//                         Watch Performances
//                       </a>
//                     </div>

//                     <div className="freeclassbadge">
//                       <div className="freebadgeicon">
//                         <Image
//                           src={FreeClassText2}
//                           alt=""
//                         />

//                         <span>
//                           <Image
//                             src={FreeBadgeLogo}
//                             alt=""
//                           />
//                         </span>
//                       </div>

//                       <Image
//                         src={BadgeBt}
//                         alt="Free Virtual Classes"
//                       />
//                     </div>
//                   </div>
//                 </div>
//               </div>
//             </div>
//           </div>
//         </SwiperSlide>

//         <SwiperSlide className="swiper-slide">
//           <picture>
//             <source
//               media="(max-width:575px)"
//               srcSet={MobileBanner420.src}
//             />
//             <source
//               media="(max-width:767px)"
//               srcSet={MobileBanner767.src}
//             />

//             <Image
//               src={Banner1}
//               alt="Banner 2"
//               width={1351}
//               height={468}
//             />

//             <div className="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
//           </picture>

//           <div className="bannercaption">
//             <div className="container">
//               <div className="row">
//                 <div className="col-xxl-6 col-xl-6 col-lg-6 col-md-8 col-sm-8 col-10">
//                   <div className="captioninner text-start">
//                     <h1>The National Kuchipudi Training Academy</h1>

//                     <div className="bannersubheading">
//                       A Breakthrough in Kuchipudi Pedagogy
//                     </div>

//                     <p>
//                       A research-driven training system, based on the scientific
//                       interpretation of Natya Shastra (Vedic literature) and
//                       documented in two training manuals refined over 20 years,
//                       enables students—including adults—to develop full-body
//                       flexibility within ~3 years, unlike the usual 10yrs.
//                     </p>

//                     <div className="d-flex gap-2 gap-xxl-3">
//                       <a
//                         href="javascript:void(0);"
//                         className="default-btn"
//                       >
//                         Join Classes
//                       </a>

//                       <a
//                         href="javascript:void(0);"
//                         className="theme-btn"
//                       >
//                         Watch Performances
//                       </a>
//                     </div>

//                     <div className="freeclassbadge">
//                       <div className="freebadgeicon">
//                         <Image
//                           src={FreeClassText}
//                           alt=""
//                         />

//                         <span>
//                           <Image
//                             src={FreeBadgeLogo}
//                             alt=""
//                           />
//                         </span>
//                       </div>

//                       <Image
//                         src={BadgeBt}
//                         alt="Free Virtual Classes"
//                       />
//                     </div>
//                   </div>
//                 </div>
//               </div>
//             </div>
//           </div>
//         </SwiperSlide>
//       </Swiper>

//       <div className="swiper-nav">
//         <div className="container container-xxl">
//           <div className="d-flex swiper-banner-nav justify-content-end justify-content-lg-between">
//             <div className="swiper-button-prev swiper-button-prev-home-banner"></div>
//             <div className="swiper-button-next swiper-button-next-home-banner"></div>
//           </div>
//         </div>
//       </div>
//     </section>
//   );
// }