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) {
    // 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>
                        <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
                           <HomeBannerOffersCard />
                        </div>
                    </SliderCom>
                </div>
            </div>
        </>
    );
}
