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



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

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

export default TeamSwiper;
