"use client";

import Title from "../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>
  );
}