"use client";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import Image from "next/image";

interface SwiperComponentProps {
  sliderImages: string;
}
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, index: number) => ( */}
        <SwiperSlide>
          <Image
            alt="banner"
            loading="eager"
            quality={50}
            width={1920}
            height={280}
            className="w-[1920px] !h-[160px] lg:!h-[280px] object-cover rounded-lg lg:rounded-none"
            src={sliderImages || ""}
          />
        </SwiperSlide>
        {/* ))} */}
      </Swiper>
    </div>
  );
}