import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Autoplay } from "swiper/modules";
// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import styles from "./HomeSlider.module.scss";
import Image from "next/image";

const HomeSlider: React.FC = () => {
  return (
    <>
      <section className={`${styles.HomeSliderWrapper} ${styles.mtb112}`}>
        <div className={`container`}>
          <div className={`${styles.SwiperSlider}`}>
            <Swiper
              modules={[Navigation, Pagination, Autoplay]}
              spaceBetween={40}
              slidesPerView={3}
              navigation
              loop={true}
              pagination={{ clickable: true }}
              autoplay={true}
              // autoplay={{ delay: 3000 }}
            >
              <SwiperSlide>
                <Image src="https://via.placeholder.com/800x400" alt="Slide 1" />
              </SwiperSlide>
              <SwiperSlide>
                <Image
                  src="https://via.placeholder.com/800x400/ff7f7f"
                  alt="Slide 2"
                />
              </SwiperSlide>
              <SwiperSlide>
                <Image
                  src="https://via.placeholder.com/800x400/77ff77"
                  alt="Slide 3"
                />
              </SwiperSlide>
              <SwiperSlide>
                <Image
                  src="https://via.placeholder.com/800x400/77ff77"
                  alt="Slide 3"
                />
              </SwiperSlide>
              <SwiperSlide>
                <Image
                  src="https://via.placeholder.com/800x400/77ff77"
                  alt="Slide 3"
                />
              </SwiperSlide>
              <SwiperSlide>
                <Image
                  src="https://via.placeholder.com/800x400/77ff77"
                  alt="Slide 3"
                />
              </SwiperSlide>
            </Swiper>
          </div>
        </div>
      </section>
    </>
  );
};

export default HomeSlider;