"use client";

import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import { Navigation, Pagination, Autoplay } from "swiper/modules";
import Image from "next/image";

export default function MasterpiecesSlider() {
  return (
    <Swiper
      modules={[Navigation, Pagination, Autoplay]}
      spaceBetween={15}
      breakpoints={{
        320: { slidesPerView: 1 },
        640: { slidesPerView: 2 },
        1024: { slidesPerView: 3 },
        1280: { slidesPerView: 4 },
      }}
      navigation={{ enabled: true }}
      autoplay={{ delay: 3000, disableOnInteraction: false }}
      loop={true}
    >
      <SwiperSlide>
        <Image src="/images/result_slider_img_1.webp" alt="Slide 1" width={1200} height={600} className="w-full h-auto rounded-lg" />
      </SwiperSlide>
      <SwiperSlide>
        <Image src="/images/result_slider_img_2.webp" alt="Slide 2" width={1200} height={600} className="w-full h-auto rounded-lg" />
      </SwiperSlide>
      <SwiperSlide>
        <Image src="/images/result_slider_img_3.webp" alt="Slide 3" width={1200} height={600} className="w-full h-auto rounded-lg" />
      </SwiperSlide>
      <SwiperSlide>
        <Image src="/images/result_slider_img_4.webp" alt="Slide 4" width={1200} height={600} className="w-full h-auto rounded-lg" />
      </SwiperSlide>
    </Swiper>
  );
}
