"use client";

import Title from "../lib_components/title";

import React from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// import required modules
import { Autoplay } from "swiper/modules";

// Import Swiper styles
import "swiper/css";

//all images
import { Ezgu, Fidokor, Kohota, Minerva, NRG, ToshCity } from "@/assets";
import Image, { StaticImageData } from "next/image";

const images: StaticImageData[] = [
  Ezgu,
  Fidokor,
  Kohota,
  Minerva,
  NRG,
  ToshCity,
];

export default function Partners() {
  return (
    <div className="my-5 max-w-[1000px] w-full mx-auto ">
      {/* title */}
      <div className="mb-4">
        <Title text="partner-h2" />
      </div>

      {/* slider */}
      <div className="my-20">
        <Swiper
          autoplay={{
            reverseDirection: true,
            delay: 2500,
            disableOnInteraction: false,
          }}
          loop={true}
          modules={[Autoplay]}
          slidesPerView={4}
          className="mySwiper flex items-center justify-around"
        >
          {images.map((item, index) => (
            <SwiperSlide key={index} className="!w-[200px] mx-10 ">
              <Image
                src={item}
                alt="Partner images"
                width={200}
                height={200}
                className="object-contain mx-auto max-w-[200px] h-auto"
              />
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </div>
  );
}
