import "./Common_Product_Swiper.css";
import Common_Heading_Holder from "../common_heading_holder/Common_Heading_Holder";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import Common_Product_Card from "../common_product_card/Common_Product_Card";

const Common_Product_Swiper = (props) => {
  return (
    <section className="Common_Product_Swiper">
      <div className="card_heading_div">
        <Common_Heading_Holder
          headingText={props?.headingText}
          viewShowAllButton={true}
          goto={`/shop?category_id=${props?.data?.id}`}
        />
      </div>

      <div className="products_main_div">
        <Swiper
          spaceBetween={15}
          // pagination={{
          //   dynamicBullets: true,
          //   clickable: true,
          // }}
          modules={[Pagination]}
          autoplay={{ delay: 300 }}
          className="common_swiper"
          breakpoints={{
            0: {
              slidesPerView: 1.3,
            },
            350: {
              slidesPerView: 2,
            },
            768: {
              slidesPerView: 3.5,
            },
            992: {
              slidesPerView: 3.2,
            },
            1200: {
              slidesPerView: 4,
            },
            1400: {
              slidesPerView: 5,
            },
          }}
        >
          {props?.data?.p_sub_categories?.length > 0 &&
            props?.data?.p_sub_categories?.map((item) => {
              return (
                <SwiperSlide>
                  <Common_Product_Card
                    prodImg={process.env.NEXT_PUBLIC_IMG_URL + item?.image}
                    prodName={item?.name}
                    theme_colour={props?.theme_colour}
                    goto={`/shop-subcategory?category_id=${props?.data?.id}&sub_category_id=${item?.id}&category_image=${props?.data?.image}`}
                  />
                </SwiperSlide>
              );
            })}
        </Swiper>
      </div>
    </section>
  );
};

export default Common_Product_Swiper;
