"use client";
import React from "react";
import { useBreakpoint } from "@/app/components/useBreakpoint";
import ProductThumb from "@/app/components/cards/product-thumb";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import { Autoplay, Pagination } from "swiper/modules";

export default function StoreThumbs(props: any) {
  const { products } = props;
  const { isMobile, isDesktop } = useBreakpoint();

 
  const slidesPerView = 1.5;
  const minSlidesForLoop = Math.ceil(slidesPerView) + 1;
  const shouldLoop = products?.length >= minSlidesForLoop;

  return (
    <>
      {isMobile && (
        <Swiper
          navigation={false}
          loop={shouldLoop}
          pagination={{
            clickable: true,
          }}
          autoplay={{
            delay: 5000,
            disableOnInteraction: false,
          }}
          slidesPerView={slidesPerView}
          spaceBetween={16}
          modules={[Pagination, Autoplay]}
          className="cc-products-thumb"
          id="cc_products_thumb"
        >
          {products &&
            products.slice(0, 6).map((item: any) => (
              <SwiperSlide key={`/slider_thumb/${item.id}`}>
                <ProductThumb
                  key={`/mob_thumb_item/${item.id}`}
                  image={`${item.main_item_image.image_url}`}
                  hoverImg=""
                  title={item.product_name}
                  price={item.price}
                  url={`/product/${item.slug}`}
                  designHouse="Morni Studios"
                  pid={item.product_id}
                  showLikeBtn={true}
                  hideDesignHouse={true}
                />
              </SwiperSlide>
            ))}
        </Swiper>
      )}
      {isDesktop && (
        <>
          {products &&
            products.slice(0, 6).map((item: any) => (
              <ProductThumb
                image={`${item.main_item_image.image_url}`}
                hoverImg=""
                title={item.product_name}
                price={item.price}
                url={`/product/${item.slug}`}
                designHouse="Morni Studios"
                pid={item.product_id}
                showLikeBtn={true}
                key={`/desktop_thumb/${item.id}`}
                hideDesignHouse={true}
                 wishType="PRODUCT"
              />
            ))}
        </>
      )}
    </>
  );
}