import { Swiper, SwiperSlide } from 'swiper/react';
import "swiper/css";
import 'swiper/css/free-mode';
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";import { A11y, Autoplay, Navigation,Scrollbar } from 'swiper/modules';
import Spinner from '../Utils/Loading/Spinner';
import ProductCard from './ProductCard';



const ProductSwiper = ({data,isLoading}:{data:any,isLoading:boolean}) => {
  
  return (
    <div className='similar_Swiper'>
      <Swiper
        dir={'ltr'}
        slidesPerView={3}
        spaceBetween={66}
        breakpoints={{
          0: { slidesPerView: 1 },
          400: { slidesPerView: 1 },
          600: { slidesPerView: 2 },
          1000: { slidesPerView: 2 },
          1200: { slidesPerView: 3 },
          1500: { slidesPerView: 4  },
        }}
        navigation
        modules={[Navigation,  Scrollbar, A11y, Autoplay]}
        pagination={{ clickable: true }}
        className="mySwiper"
      >
        {
        isLoading ? <Spinner/> :
        data?.data?.map((item:any, index:number) => (
          <SwiperSlide key={index}>
            <ProductCard
              data={item}
            />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}

export default ProductSwiper;
