"use client";

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

const BrandCarousel = () => {
  return (
    <Swiper
      modules={[Autoplay]}
      autoplay={{
        delay: 2500,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      }}
      loop
      grabCursor
      observer
      observeParents
      slidesPerView={3}
      spaceBetween={30}
      breakpoints={{
        375: { slidesPerView: 1, spaceBetween: 20 },
        480: { slidesPerView: 2, spaceBetween: 20 },
        577: { slidesPerView: 2, spaceBetween: 24 },
        769: { slidesPerView: 3, spaceBetween: 24 },
        1025: { slidesPerView: 4, spaceBetween: 24 },
        1201: { slidesPerView: 6, spaceBetween: 24 },
        1366: { slidesPerView: 6, spaceBetween: 24 },
        1440: { slidesPerView: 6, spaceBetween: 24 },
        1920: { slidesPerView: 6, spaceBetween: 30 },
      }}
      className="testimonial-brand-slider"
    >
      {testimonialBrands.map((brand) => (
        <SwiperSlide key={brand.id}>
          <div
            data-aos="fade"
            data-aos-duration="900"
            data-aos-delay={brand.aosDelay}
          >
            <div className="brand-img">
              <Link href={brand.path}>
                <Image
                  src={brand.image}
                  alt={brand.alt}
                  width={120}
                  height={25}
                />
              </Link>
            </div>
          </div>
        </SwiperSlide>
      ))}
    </Swiper>
  );
};

export default BrandCarousel;