"use client";

import { brandLogosData } from "@/data/home/brandLogosData";
import Image from "next/image";
import Link from "next/link";
import { Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

export default function BrandLogos() {
  const { subtitle, title, description, brands } = brandLogosData;

  return (
    <section className="brand-sec space">
      <div className="container-fluid">
        <div className="sec-title">
          <span className="sub-title">{subtitle}</span>
          <h2 className="title">{title}</h2>
          <p>{description}</p>
        </div>
        <div className=" brand">
          <Swiper
            modules={[Autoplay]}
            loop
            speed={500}
            spaceBetween={24}
            autoplay={{
              delay: 1800,
              disableOnInteraction: false,
              pauseOnMouseEnter: true,
            }}
            breakpoints={{
              0: { slidesPerView: 2 },
              576: { slidesPerView: 3 },
              768: { slidesPerView: 4 },
              992: { slidesPerView: 5 },
              1200: { slidesPerView: 6 },
              1400: { slidesPerView: 7 },
            }}
          >
            {brands.map((brand) => (
              <SwiperSlide key={brand.id}>
                <div
                  className="brand-img"
                  data-aos="fade"
                  data-aos-duration={900}
                  data-aos-delay={brand.aosDelay}
                >
                  <Link href="#" title="">
                    <Image
                      src={brand.image}
                      alt={brand.alt}
                      width={115}
                      height={17}
                    />
                  </Link>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </div>
    </section>
  );
}