"use client";

import "swiper/css";
// import "swiper/css/navigation";
import "swiper/css/pagination";
import { useEffect, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import Image from "next/image";
import axios from "@/utils/axios-config";
import Link from "next/link";
import BannersSkeleton from "../skeletons/skeleton-banners";
import { useLocale } from "next-intl";

interface DataType {
  id: number;
  created_at: string;
  banner_image: string;
  order: number;
  offer_id: null | number;
}
function Slider() {
  const locale = useLocale();
  const [banners, setBanners] = useState<DataType[]>([]);

  //// fetch banners

  useEffect(() => {
    const fetchBanners = async () => {
      try {
        const response = await axios.get("/banners");
        if (response?.data?.status) {
          const data = await response?.data?.data;

         // console.log("bannersHome", data);
          setBanners([...data]);
        }
      } catch (error) {
        // console.error("Failed to fetch favorites:", error);
      }
    };
    fetchBanners();
  }, []);

  const skeleton = (
    <div className="w-full h-[250px] md:h-[350px] bg-gray-300 rounded-md animate-pulse"></div>
  );
  return (
    <section className="slider ml-[10px]  md:ml-0 pt-[10px] pb-[10px]">
      {banners.length > 0 ? (
        <div className="container mx-auto px-4 md:px-[20px] min-[810px]:px-0 lg:px-[20px] min-[1070px]:px-[0px] ">
          <Swiper
            slidesPerView={2}
            breakpoints={{
                0: {
                slidesPerView: 1,
              },
              // Tablet: 2 slides
              768: {
                slidesPerView: 2,
              },
              // Large screens: 2 slides (you can change this to 3 if you want more)
              1200: {
                slidesPerView: 2,
              },
            }}
            spaceBetween={26}
            loop={true}
            //   navigation={true}
            pagination={{
              clickable: true,
              type: "bullets",
              dynamicBullets: true,
            }}
            autoplay={{
              delay: 2000,
              disableOnInteraction: false,
            }}
            modules={[Pagination, Autoplay]}
            className="swiper w-full flex justify-between items-center gap-[35px] flex-col md:flex-row"
          >
            {/* <SwiperSlide className="mb-8">
            <div className="rtl:transform rtl:scale-x-[-1] bg-[url('/images/slider/div.banner-back-1.png')] w-full h-[272px] bg-cover bg-center rounded-[15px]  p-[25px] text-[#184363] aspect-w-16 aspect-h-9 max-w-full max-h-full">
              <div className="rtl:transform rtl:scale-x-[-1] flex flex-col justify-center">
                <h6 className="text-[12px] xs:text-sm mb-2 sm:mb-4">
                  From 9.99 SAR
                </h6>
                <h4 className="text-2xl sm:text-3xl font-semibold mb-1">
                  Covid 19 pack
                </h4>
                <p className="text-[20px] sm:text-[25px]">
                  Get it now
                  <br />
                  45% Off
                </p>
              </div>
            </div>
          </SwiperSlide>
          <SwiperSlide className="mb-8">
            <div className="rtl:transform rtl:scale-x-[-1] bg-[url('/images/slider/div.banner-back-2.png')] w-full h-[272px] bg-cover bg-center rounded-md flex flex-col justify-center p-[25px] text-[#184363] aspect-w-16 aspect-h-9 max-w-full max-h-full">
              <div className="rtl:transform rtl:scale-x-[-1] flex flex-col justify-center">
                <h4 className="text-2xl sm:text-3xl font-semibold mb-1">
                  Breathable
                </h4>
                <p className="text-[20px] sm:text-[25px]">Face Mask</p>
              </div>
            </div>
          </SwiperSlide>
          <SwiperSlide className="mb-8">
            <div className="rtl:transform rtl:scale-x-[-1] bg-[url('/images/slider/div.banner-back-1.png')] w-full h-[272px] bg-cover bg-center rounded-md flex flex-col justify-center p-[25px] text-[#184363] aspect-w-16 aspect-h-9 max-w-full max-h-full">
              <div className="rtl:transform rtl:scale-x-[-1] flex flex-col justify-center">
                <h6 className="text-[12px] xs:text-sm mb-2 sm:mb-4">
                  From 9.99 SAR
                </h6>
                <h4 className="text-2xl sm:text-3xl font-semibold mb-1">
                  Covid 19 pack
                </h4>
                <p className="text-[20px] sm:text-[25px]">
                  Get it now
                  <br />
                  45% Off
                </p>
              </div>
            </div>
          </SwiperSlide>
          <SwiperSlide className="mb-8">
            <div className="rtl:transform rtl:scale-x-[-1] bg-[url('/images/slider/div.banner-back-2.png')] w-full h-[272px] bg-cover bg-center rounded-md flex flex-col justify-center px-[45px] text-[#184363] aspect-w-16 aspect-h-9 max-w-full max-h-full">
              <div className="rtl:transform rtl:scale-x-[-1] flex flex-col justify-center">
                <h4 className="text-2xl sm:text-3xl font-semibold mb-1">
                  Breathable
                </h4>
                <p className="text-[20px] sm:text-[25px]">Face Mask</p>
              </div>
            </div>
          </SwiperSlide> */}
            {banners?.map((item) => (
              <>
                <SwiperSlide className="mb-8 relative" key={item?.id}>
                  {item?.offer_id ? (
                    <Link
                      href={`/${locale}/offers/${item?.offer_id}`}
                      locale={false}
                      className="absolute cursor-pointer !text-transparent !bg-transparent w-full h-full left-0 top-0"
                    />
                  ) : null}
                  {/* <div
                    key={item?.id}
                    className="w-full shadow-md lg:min-h-[260px] md:min-h-[260px] sm:min-h- bg-[length:100%_100%] bg-center bg-no-repeat lg:bg-cover md:bg-contain rounded-[15px] flex flex-col justify-center  text-[#184363]  max-w-full max-h-full"
                    style={{ backgroundImage: `url(${item?.banner_image})` }}
                  ></div> */}
                  {/* <Image
                    src={item?.banner_image}
                    alt={item?.banner_image}
                    width={0}
                    height={400}
                    //sizes="(max-width: 768px) 100vw, auto"
                    sizes="100vw" // Ensures it takes full width
                    style={{
                      width: "100%",
                      height: "400px",
                      objectFit: "cover",
                    }}
                    className="rounded-[15px]"
                  /> */}
                  <div className="relative w-full aspect-[16/9] rounded-[15px] overflow-hidden">
                    <Image
                      src={item?.banner_image}
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                      alt={item?.banner_image}
                      fill
                      className="object-cover"
                      loading="lazy"
                    />
                  </div>
                  {/* <img src={item?.banner_image} alt={item?.banner_image} className="w-full rounded-[15px] h-[400px] object-cover" /> */}
                </SwiperSlide>
              </>
            ))}
          </Swiper>
        </div>
      ) : (
        <BannersSkeleton />
      )}
    </section>
  );
}

export default Slider;