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

type sliderImages = {
  image: string; // URL of the image
  _id: string; // Unique identifier for the image
};

type ImageData = {
  EnablePromotionalTextOnTitle: boolean; // Whether promotional text is enabled on the title
  IsDisplayHome: boolean; // Whether the category is displayed on the home page
  image: string; // URL of the category image
  isActive: boolean; // Whether the category is active
  longDic: string; // Long description of the category
  name: string; // Name of the category
  shortDic: string; // Short description of the category
  sliderImages: sliderImages[]; // Array of banner images
  sort: number; // Sort order
  __v: number; // Version key for MongoDB
  _id: string; // Unique identifier for the category
};

interface SwiperComponentProps {
  data: ImageData;
}
export default function Page({ data }: 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}
      >
        {data.sliderImages.map((resp: sliderImages, 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>
  );
}