"use client";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import Slider from "react-slick";
import axios from "@/utils/axios-config";
import Image from "next/image";
import { Skeleton } from "antd";
import { useLocale } from "next-intl";
import Link from "next/link";

interface DataType {
  id: number;
  created_at: string;
  slider_image: string;
  order: number;
  offer_id: null | number;
}

function ProductsSlider() {
  const locale = useLocale();
  const settings = {
    dots: true,
    infinite: true,
    arrows: true,
    autoplay: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };

  //const [banners, setBanners] = useState<DataType[]>([]);
 const { sliders } = useSelector((state: { Sliders: any }) => state.Sliders);
  //// fetch banners
  // const fetchBanners = async () => {
  //   try {
  //     const response = await axios.get("/sliders");
  //     if (response?.data?.status) {
  //       const data = await response?.data?.data;

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

  // useEffect(() => {
  //   fetchBanners();
  // }, []);

  const skeleton = (
    <div className="w-full h-[250px] md:h-[350px] bg-gray-300 rounded-md animate-pulse"></div>
  );
  return (
    <div className="slider-container max-w-[2000px]  mx-auto">
      {sliders.length === 0 ? (
        skeleton
      ) : (
        <Slider {...settings}>
          {sliders.map((banner:any) => (
            <div key={banner.id} className="relative w-full aspect-[16/8] sm:aspect-[16/6] lg:aspect-[16/4.2]">
              {banner.offer_id ? (
                <Link
                  href={`/${locale}/offers/${banner.offer_id}`}
                  locale={false}
                  className="absolute cursor-pointer !text-transparent !bg-transparent w-full h-full left-0 top-0"
                />
              ) : null}

              {/* <img
              src={banner?.banner_image || "/images/no-banner.png"}
              alt="banner"
              className="w-auto h-auto  object-cover"
            /> */}
              <Image
               src={banner?.slider_image}
//src={'/images/test-banner.png'}
                alt={banner?.slider_image}
                // width={1398}
                // height={940}
                fill
                sizes="100vw"
                className="object-cover"
                 priority
                
                // sizes="100vw"
                // className="w-full max-h-[300px] md:max-h-[500px] object-cover "
              />
            </div>
          ))}
        </Slider>
      )}
    </div>
  );
}

export default ProductsSlider;