// import React, { useEffect, useState } from "react";
// import Slider from "react-slick";
// import "slick-carousel/slick/slick.css";
// import "slick-carousel/slick/slick-theme.css";
// import Image from "next/image";
// import axios from "axios";
// import { useRouter } from "next/router";

// export default function ImageCarousel() {

//   const router = useRouter();

//   const [latestProducts,setLatestProducts] = useState<any>([])

//   useEffect(()=>{
//     axios.get('https://api.jazzagain.com/public/index.php/api/getLatestProducts')
//     .then(response=>{
//       // console.log(response.data.products)
//       setLatestProducts(response.data.products)
//     })
//   },[])

//     const settings = {
//       dots: false,
//       infinite: true,
//       speed: 500,
//       autoplay: true,
//       slidesToShow: 1,
//       slidesToScroll: 1,
//     };

//     return (
//       <div className="overflow-hidden h-[200px] cursor-pointer">
//         <Slider {...settings}>
//         { latestProducts.length > 0 ?
//         latestProducts.map((item:any, index:number) => (
//           <div key={index} className="bg-white w-full"
//           onClick={()=>{router.push(`/singleproduct/${item._id}`)}}
//           >
//             <Image
//               src={`https://api.jazzagain.com/public/${item.productFeaturedImage}`}
//               width={200}
//               height={200}
//               alt=""
//               className="object-contain m-auto h-52"
//             />
//           </div>
//         ))
//       :
//       <div className="bg-white w-full ">
//       Loading...
//       </div>
//       }
//           {/* <div className="bg-white w-full ">
//             <Image
//               src={"/images/1.jpg"}
//               width={200}
//               height={200}
//               alt=""
//               className="object-contain m-auto"
//             />
//           </div> */}
//         </Slider>
//       </div>
//     );
// }


// CAROSAL FOR BANNER FROM HERE 
import React, { useEffect, useState } from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Image from "next/image";
import axios from "axios";
import { useRouter } from "next/router";
import { message } from "antd";
import Cookies from "js-cookie";
import styles from '../../styles/slider.module.css';



export default function ImageCarousel() {

  const router = useRouter();

  const [latestProducts,setLatestProducts] = useState<any>([])



  const bannerData = [
    {
      image:'/images/facing.jpg',
      mobileImage:'/images/facing2.jpg',
      redirect: ()=>{
        router.push('/product')
      }
    },
    {
      image:'/images/make-money-banner-lg.jpg',
      mobileImage:'/images/make-money-banner-mobile.jpg',
      redirect: ()=>{
        const authToken = Cookies.get("jazz_token");

        if (authToken) {
          const axiosInstance = axios.create({
            baseURL: "https://api.jazzagain.com/public/index.php",
            headers: {
              authorization: `Bearer ${authToken}`,
            },
          });
          axiosInstance
            .get("/api/user/getProfile")
            .then((response) => {
              // setuserProfile(response.data.profile);
              if (
                response.data.profile.firstName &&
                response.data.profile.address &&
                response.data.profile.bankAccount &&
                response.data.profile.bankName &&
                response.data.profile.email &&
                response.data.profile.phone
                // response.data.profile.phoneCode &&
                // response.data.profile.photo
              ) {
                router.push("/sell");
              } else {
                router.push("/seller/signUp");
              }
            })
            .catch((error) => {
              console.error("Error fetching data:", error);
              message.error("Something went wrong !");
            });
        } else {
          message.error("You are not logged in, Please login first.!");
          router.push("/auth/login");
        }
      }
    },
    {
      image:'/images/aso.jpg',
      mobileImage:'/images/aso2.jpg',
      redirect: ()=>{
        router.push('/product?keyword=aso%20ebi&category=64f31f9ead61e014230ddf82')
      }
    },
  ]


    const settings = {
      dots: false,
      infinite: true,
      speed: 500,
      autoplay: true,
      slidesToShow: 1,
      slidesToScroll: 1,
    } as any;

    return (
      <div className="overflow-hidden h-[200px] cursor-pointer">
        <Slider {...settings}>
        { bannerData.length > 0 ?
        bannerData.map((item:any, index:number) => (
          <div key={index} className="bg-white w-full">
          {/* Desktop Image: Show only on medium (md) screens and larger */}
          <Image
            src={item.image}
            width={1000}
            height={1000}
            alt="Hero Banner Image"
            className={`${styles.desktopImage} w-full h-auto cursor-pointer`}
            onClick={item.redirect}
          />
          {/* Mobile Image: Show on screens smaller than medium (below md) */}
          <Image
            src={item.mobileImage}
            width={500}
            height={500}
            alt="Hero Banner Image"
            className={`${styles.mobileImage} w-full h-[30vh] cursor-pointer`}
            onClick={item.redirect}
          />
        </div>
        ))
      :
      <div className="bg-white w-full ">
      Loading...
      </div>
      }
        </Slider>
      </div>
    );
}




// banner get by api 

// import React, { useEffect, useState } from "react";
// import Slider from "react-slick";
// import "slick-carousel/slick/slick.css";
// import "slick-carousel/slick/slick-theme.css";
// import Image from "next/image";
// import axios from "axios";
// import { useRouter } from "next/router";
// import styles from "../../styles/slider.module.css";

// export default function ImageCarousel() {
//   const router = useRouter();
//   const [bannerData, setBannerData] = useState<any[]>([]);
//   const [isLoading, setIsLoading] = useState(true);

//   useEffect(() => {
//     const fetchBanners = async () => {
//       try {
//         const response = await axios.get(
//           "https://api.jazzagain.com/public/index.php/api/banner"
//         );
//         const onlyWithDesktopImage = response.data.filter(
//           (item: any) => item.desktopImage && item.active === 1
//         );
//         setBannerData(onlyWithDesktopImage);
//       } catch (error) {
//         console.error("Failed to fetch banners:", error);
//       } finally {
//         setIsLoading(false);
//       }
//     };

//     fetchBanners();
//   }, []);

//   const settings = {
//     dots: false,
//     infinite: true,
//     speed: 500,
//     autoplay: true,
//     slidesToShow: 1,
//     slidesToScroll: 1,
//   };

//   return (
//     <div className="overflow-hidden h-[200px] cursor-pointer">
//       <Slider {...settings}>
//         {isLoading ? (
//           <div className="bg-white w-full text-center py-6">Loading...</div>
//         ) : bannerData.length > 0 ? (
//           bannerData.map((item: any, index: number) => (
//             <div key={index} className="bg-white w-full">
//               <Image
//                 src={`https://api.jazzagain.com/public/${item.desktopImage}`}
//                 width={1200}
//                 height={500}
//                 alt={`Banner ${index}`}
//                 className={`${styles.desktopImage} w-full h-auto cursor-pointer`}
//                 onClick={() => {
//                   if (item.url) {
//                     router.push(`/${item.url}`);
//                   }
//                 }}
//               />
//             </div>
//           ))
//         ) : (
//           <div className="bg-white w-full text-center py-6">No Banners</div>
//         )}
//       </Slider>
//     </div>
//   );
// }