"use client";

import Title from "../tools/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="flex flex-col items-center justify-center gap-20 mt-20 max-w-[1200px] w-full mx-auto">
      {/* title */}
      <div className="mb-4">
        <Title text="brand-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"
        >
          {slideImage.map((item, index) => (
            <SwiperSlide key={index}>
              <Image
                src={item}
                alt="Partner images"
                className="w-[200px] h-[200px] object-contain"
              />
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </div>
  );
}