"use client";

import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

const swiperOptions = {
  modules: [Autoplay, Pagination, Navigation],
  slidesPerView: 1,
  spaceBetween: 30,
  loop: true,
  autoplay: {
    delay: 1500,
    disableOnInteraction: false,
  },
  breakpoints: {
    992: {
      slidesPerView: 4,
    },
    768: {
      slidesPerView: 3,
    },
    576: {
      slidesPerView: 3,
    },
    0: {
      slidesPerView: 2,
    },
  },
};

export default function BrandActiveSlider() {
  return (
    <>
      <Swiper {...swiperOptions}>
        <SwiperSlide>
          <div className="brand-item">
            <img src="/assets/img/custom/COX-MEDIA.png" alt="" />
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="brand-item">
            <img src="/assets/img/custom/logo_cl.png" alt="" />
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="brand-item">
            <img src="/assets/img/custom/brand-3.png" alt="" />
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="brand-item">
            <img src="/assets/img/custom/brand-5.png" alt="" />
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="brand-item">
            <img src="/assets/img/custom/brand-7.png" alt="" />
          </div>
        </SwiperSlide>
      </Swiper>
    </>
  );
}