"use client";

import Title from "../tools/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-[1200px] w-full mx-auto ">
      {/* title */}
      <div className="mb-4">
        <Title text="partner-h2" />
      </div>

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