"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import Breadcrumb from "@/components/ui/Breadcrumb";
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;
  mobile_banner: string | null;
}

const Banner = () => {
  const [banner, setBanner] = useState<BannerData | null>(null);
  const [loading, setLoading] = useState(true);

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

        if (result.success && result.data?.length > 0) {
          setBanner(result.data[0]);
        }
      } catch (error) {
        console.error(error);
      } finally {
        setLoading(false);
      }
    };

    fetchBanner();
  }, []);

  if (loading || !banner) return null;

  return (
    <section className="bannercontainer innerbanner">
      <picture>
        {banner.mobile_banner && (
          <source
            media="(max-width:575px)"
            srcSet={banner.mobile_banner}
          />
        )}

        {banner.desktop_banner && (
          <Image
            src={banner.desktop_banner}
            alt={banner.banner_name}
            width={1920}
            height={500}
            priority
          />
        )}
      </picture>

      <div className="bannercaption">
        <div className="container">
          <Breadcrumb items={[
            { label: "Home", href: "/" },
            { label: "About" },
          ]} />

          <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_text && <p>{banner.banner_text}</p>}

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

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

export default Banner;



// "use client";

// import Image from "next/image";
// import Banner1 from "@/images/about-banner.webp";
// import BannerMobile from "@/images/about-mobile-banner.webp";
// import Breadcrumb from "@/components/ui/Breadcrumb";

// const Banner = () => {
//   return (
//     <section className="bannercontainer innerbanner">
//       <picture>
//         <source
//           media="(max-width:575px)"
//           srcSet={BannerMobile.src}
//         />
//         <Image
//           src={Banner1}
//           alt="About Banner"
//           priority
//         />
//       </picture>

//       <div className="bannercaption">
//         <div className="container">
//           <Breadcrumb items={[
//             { label: "Home", href: "/" },
//             { label: "About" },
//           ]} />

//           <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>
//                   Preserving the Legacy
//                   <br />
//                   of Kuchipudi
//                 </h1>

//                 <p>
//                   For over two decades, RKDA has been nurturing students
//                   through authentic Kuchipudi traditions, scientific pedagogy,
//                   and world-class performance training.
//                 </p>

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

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

// export default Banner;