"use client";

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

export default function BrandSection() {
  const { title, brands } = brandSectionData;

  return (
    <div className="carousel-container">
      <div
        className="brand-title"
        data-aos="fade-down"
        data-aos-duration={900}
        data-aos-delay={200}
      >
        <h2 className="title">{title}</h2>
      </div>
      <Swiper
        modules={[Autoplay]}
        slidesPerView={6}
        spaceBetween={30}
        loop={true}
        autoplay={{
          delay: 2500,
          disableOnInteraction: false,
        }}
        breakpoints={{
          320: {
            slidesPerView: 2,
            spaceBetween: 20,
          },
          640: {
            slidesPerView: 3,
            spaceBetween: 20,
          },
          768: {
            slidesPerView: 4,
            spaceBetween: 30,
          },
          1024: {
            slidesPerView: 5,
            spaceBetween: 30,
          },
          1200: {
            slidesPerView: 6,
            spaceBetween: 30,
          },
        }}
        data-aos="fade-up"
        data-aos-duration={900}
        data-aos-delay={200}
        className="brand-slider"
      >
        {brands.map((brand, index) => (
          <SwiperSlide key={index}>
            <div className="brand-img">
              <a href={brand.href} title={brand.alt}>
                <Image
                  src={brand.image}
                  alt={brand.alt}
                  width={140}
                  height={30}
                />
              </a>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}