import SliderCom from "../Helpers/SliderCom";
import slider2 from "../../assets/images/slider-2.jpg";
import HomeBannerOffersCard from "../Cards/HomeBannerOffersCard";

export default function HomeSliders(props) {
  // console.log("BANNER LIST IN HomeSliders->", props.bannerList);
  // debugger;
  return (
    <>
      <div className="hero-slider relative 2xl:w-[600px] xl:w-[500px] lg:w-[420px] w-full mb-2 lg:mb-0 ">
        <div className="w-full">
          <SliderCom settings={props.settings}>
            {props.bannerList?.length <= 0 && (
              <div className="item w-full h-full bg-white dark:bg-dark-white max-h-80 rounded-2xl overflow-hidden">
                <img src={slider2} alt="slider" className="w-full h-full" />
              </div>
            )}
            {props.bannerList?.length &&
              props.bannerList.map((item, index) => (
                <div
                  key={index}
                  className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden"
                >
                  <HomeBannerOffersCard itemData={item} />
                </div>
              ))}
          </SliderCom>
        </div>
      </div>
    </>
  );
}
