// import Swiper core and required modules
import { Navigation, A11y } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
import CustomImage from "../../ui/CustomImage";

const ProductSlider = (data:any) => {

  const handelImage = (item: any) => {
    // setMainImage(item);
  };
  return (
    <div className="product_images_swiper">
      <Swiper
        modules={[Navigation, A11y]}
        spaceBetween={10}
        slidesPerView={4}
        navigation
      >
        {data?.images?.map(({item,index}:any)=>{
            return (
              <SwiperSlide key={index}>
                <span key={index}  onClick={() => handelImage(item?.path)} >
                  <CustomImage
                    className="product_multi_image"
                    src={item?.path}
                    alt=""
                  />
              </span>
            </SwiperSlide>
            )
          })}
      </Swiper>
    </div>
  );
};
export default ProductSlider;
