"use client";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import Image from "next/image";
import { SliderImageModel } from "@/lib/types/models";

interface SwiperComponentProps {
  sliderImages: SliderImageModel[];
}
export default function Page({ sliderImages }: SwiperComponentProps) {
  return (
    <div className="mobile-container mt-5 lg:mt-0">
      <Swiper
        spaceBetween={0}
        slidesPerView={1}
        centeredSlides={true}
        autoplay={{
          delay: 2500,
          disableOnInteraction: false,
        }}
        modules={[Autoplay]}
        loop={true}
      >
        {sliderImages.map((resp: SliderImageModel, index: number) => (
          <SwiperSlide key={index}>
            <Image
              alt="banner"
              loading="eager"
              quality={50}
              width={1920}
              height={450}
              className="w-[1920px] !h-[192px] lg:!h-[450px] object-cover rounded-lg lg:rounded-none"
              src={resp.image || ""}
            />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}