'use client';

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/grid';
import 'swiper/css/autoplay';
import s from './styles.module.scss';

import Image from 'next/image';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Grid } from 'swiper/modules';
import { slidesData } from '@widgets/partners-slider/model/slides';

const swiperBreakpoints = {
  360: {
    slidesPerView: 1,
    spaceBetween: 10,
  },
  768: {
    slidesPerView: 3,
    spaceBetween: 30,
  },
  1024: {
    slidesPerView: 4,
    spaceBetween: 30,
  },
  1440: {
    slidesPerView: 5,
    spaceBetween: 30,
  },
};

function PartnersSlider() {
  return (
    <Swiper
      className={s.Slider}
      modules={[Grid, Autoplay]}
      breakpoints={swiperBreakpoints}
      autoplay={{
        delay: 2000,
        disableOnInteraction: false,
      }}
      loop={true}
    >
      {slidesData.map(({ id, name, image }) => (
        <SwiperSlide key={id} className={s.Slide}>
          <Image src={image} alt={name} quality={75} />
        </SwiperSlide>
      ))}
    </Swiper>
  );
}

export { PartnersSlider };