import Slider from "react-slick"; // Import Slider
import "slick-carousel/slick/slick.css"; // Import slick CSS
import "slick-carousel/slick/slick-theme.css";

const Carousel = () => {
    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 3000,
    };

    return (
        <>
            <section className="py-5">
                <Slider {...settings}>
                <div>
                        <img src="/public/image/banner.png" alt="Product 1" className="w-full h-100 object-cover rounded-md mx-auto" /> {/* Changed height and added mx-auto for centering */}
                    </div>
                    <div>
                        <img src="/public/image/banner.png" alt="Product 2" className="w-full h-100 object-cover rounded-md mx-auto" /> {/* Changed height and added mx-auto for centering */}
                    </div>
                    <div>
                        <img src="/public/image/banner.png" alt="Product 3" className="w-full h-100 object-cover rounded-md mx-auto" /> {/* Changed height and added mx-auto for centering */}
                    </div>
                    {/* Add more images as needed */}
                </Slider>
            </section>
        </>
    );
};

export default Carousel;