"use client";
import React from "react";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import Link from "next/link";
import { Autoplay } from "swiper/modules";
import { brandData } from "@/data/home/brandData";

const BrandSection: React.FC = () => {
  const { title, description, logos } = brandData;

  return (
    <section className="brand-sec space">
      <div className="carousel-container">
        <div className="brand-title">
          <h2
            className="title"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={300}
          >
            {title}
          </h2>
          <p data-aos="fade-up" data-aos-duration={900} data-aos-delay={400}>
            {description}
          </p>
        </div>
        <div
          className="brnad-info"
          data-aos="fade-up"
          data-aos-duration={900}
          data-aos-delay={500}
        >
          <Swiper
            modules={[Autoplay]}
            autoplay={{
              delay: 3000,
              disableOnInteraction: false,
            }}
            loop={true}
            spaceBetween={30}
            slidesPerView={2}
            breakpoints={{
              576: { slidesPerView: 3 },
              768: { slidesPerView: 4 },
              992: { slidesPerView: 5 },
            }}
          >
            {logos.map((logo) => (
              <SwiperSlide key={logo.id}>
                <div className="brnad-img">
                  <Link href="/contact" title="Contact us">
                    <Image
                      src={logo.img}
                      alt={logo.alt}
                      width={110}
                      height={20}
                    />
                  </Link>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </div>
    </section>
  );
};

export default BrandSection;