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 CheckoutCard from './CheckoutCard';



const BaseSwiper = ({data,isLoading}:{data:any,isLoading:boolean}) => {

  return (
    <div className='checkout_Swiper'>
      <Swiper
        dir={'ltr'}
        slidesPerView={3}
        spaceBetween={60}
        breakpoints={{
          0: { slidesPerView: 1 },
          400: { slidesPerView: 1 },
          600: { slidesPerView: 1 },
          900: { slidesPerView: 2 },
          1200: { slidesPerView: 2 },
          1500: { slidesPerView: 3  },
        }}
        navigation
        autoplay={true}
        modules={[Navigation,  Scrollbar, A11y, Autoplay]}
        pagination={{ clickable: true }}
        className="mySwiper"
      >
        {
        isLoading ? <Spinner/> :
        data?.map((item:any, index:number) => (
          <SwiperSlide key={index}>
            <CheckoutCard
              name={item?.name}
              src={item?.src}
              key={index}
            />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}

export default BaseSwiper;
