'use client';

import Image from 'next/image';
// Import Swiper styles
import 'swiper/css';
import { Autoplay, FreeMode } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';

import { Partners } from '@/app/api-utlities/@types';

interface PartnersSliderProps {
  partners: Partners;
  autoplaySpeed?: number;
  className?: string;
  direction?: 'ltr' | 'rtl';
}

export function PartnersSlider({
  partners,
  autoplaySpeed = 3000,
  className = '',
  direction = 'ltr',
}: PartnersSliderProps) {
  return (
    <div className={`w-full ${className}`}>
      <Swiper
        modules={[Autoplay, FreeMode]} // Register Swiper modules
        slidesPerView='auto'
        spaceBetween={30}
        loop={true}
        freeMode={true}
        speed={autoplaySpeed}
        grabCursor={true}
        autoplay={{
          delay: 1000,
          disableOnInteraction: false,
          pauseOnMouseEnter: false,
          reverseDirection: direction === 'rtl',
        }}
        allowTouchMove={true}
        breakpoints={{
          320: {
            slidesPerView: 4,
            spaceBetween: 5,
          },
          640: {
            slidesPerView: 4,
            spaceBetween: 20,
          },
          768: {
            slidesPerView: 4,
            spaceBetween: 30,
          },
          1024: {
            slidesPerView: 5,
            spaceBetween: 30,
          },
        }}
      >
        {partners.map((partner) => (
          <SwiperSlide key={partner.id}>
            <div className='flex h-32 items-center justify-center px-4'>
              <Image
                src={partner.poster || '/placeholder.svg'}
                alt={partner.name}
                fill
                className='w-auto scale-90 object-contain transition-transform hover:scale-105'
              />
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}
