"use client";

import Title from "../title";
import { Gehl, Hyundai, JCB, Lonking, Mitsubishi, XCMG } from "@/assets";
import Image, { StaticImageData } from "next/image";

// ========== React Swiper ============ ///

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

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

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

// ========== React Swiper ============ ///

const slideImage: StaticImageData[] = [
  Lonking,
  Hyundai,
  Gehl,
  JCB,
  Mitsubishi,
  XCMG,
];

export default function Texnika() {
  return (
    <div className="my-20 max-w-[1100px] w-full mx-auto">
      {/* title */}
      <div className="mb-4">
        <Title text="brand-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"
        >
          {slideImage.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>
  );
}