import { Autoplay, Navigation, Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

const swiperOptions = {
    modules: [Autoplay, Navigation, Pagination],
    slidesPerView: 1,
    spaceBetween: 0,
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },
    loop: true,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
};

export default function Slider2() {
    return (
        <section className="slider d-flex justify-content-center align-items-center"
        style={{ padding: "90px 0 0" }}>
            <div className="slider-wrapper" style={{ maxWidth: "1920px", width: "100%" }}>
                <Swiper {...swiperOptions} className="theme_carousel position-relative">

                    {/* Slide 1 */}
                    <SwiperSlide>
                        <img
                            src="assets/images/slider/1.webp"
                            alt="Slide 1"
                            style={{
                                width: "100%",
                                height: "auto",
                                display: "block",
                            }}
                        />
                    </SwiperSlide>

                    {/* Slide 2 */}
                    <SwiperSlide>
                        <img
                            src="assets/images/slider/2.webp"
                            alt="Slide 2"
                            style={{
                                width: "100%",
                                height: "auto",
                                display: "block",
                            }}
                        />
                    </SwiperSlide>

                    {/* Slide 3 */}
                    <SwiperSlide>
                        <img
                            src="assets/images/slider/3.webp"
                            alt="Slide 3"
                            style={{
                                width: "100%",
                                height: "auto",
                                display: "block",
                            }}
                        />
                    </SwiperSlide>

                    <div className="swiper-button-prev"></div>
                    <div className="swiper-button-next"></div>
                </Swiper>
            </div>
        </section>
    );
}