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 SingleProductSwiper = ({data,isLoading}:{data:any,isLoading:boolean}) => {
  const [mainImage, setMainImage] = useState(data?.file);
console.log(data?.data?.attachment);

  const handleImageClick = (image:any) => {
    setMainImage(image);
  };
  return (
    <div className='single_product_Swiper'>
      <Swiper
        dir={'ltr'}
        slidesPerView={3}
        spaceBetween={66}
        breakpoints={{
          0: { slidesPerView: 1 },
          400: { slidesPerView: 2 },
          600: { slidesPerView: 2 },
          1000: { slidesPerView: 3 },
          1200: { slidesPerView: 4 },
          1500: { slidesPerView: 4  },
        }}
        navigation
        modules={[Navigation,  Scrollbar, A11y, Autoplay]}
        pagination={{ clickable: true }}
        className="mySwiper"
      >
        {
        isLoading ? <Spinner/> :
        data?.data?.attachment?.map(({attachment, id}:{attachment:string,id:number}) => {
          return(
            <SwiperSlide key={id}>
              <div key={id} className="image_container" onClick={() => handleImageClick(attachment)}>
                <img src={attachment} alt={`product_multi_image_${id}`} className='multi_image' />
              </div>
            </SwiperSlide>
          )
        })}
      </Swiper>
    </div>
  );
}

export default SingleProductSwiper;
