import SliderCom from "../Helpers/SliderCom";
import slider1 from "../../assets/images/slider-1.jpg";
import slider2 from "../../assets/images/slider-2.jpg";
import slider3 from "../../assets/images/slider-3.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}>
                        {/*<div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">*/}
                        {/*    <img src={slider1} alt="slider" className="w-full h-full" />*/}
                        {/*</div>*/}
                        <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
                            <img src={slider2} alt="slider" className="w-full h-full" />
                        </div>
                        {/*<div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">*/}
                        {/*    <img src={slider3} alt="slider" className="w-full h-full" />*/}
                        {/*</div>*/}
                        {props.bannerList.map((item, index) => (
                            <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
                                <HomeBannerOffersCard
                                    itemData={item}
                                />
                            </div>
                        ))}
                    </SliderCom>
                </div>
            </div>
        </>
    );
}