import { Swiper, SwiperSlide } from "swiper/react";
import ProductCard from "./ProductCard";
import "swiper/css";
import Image from "../elements/Image";
import Link from "../elements/Link";
import { SkeletonProduct } from "../elements/Skeleton";

export default function ProductSlider({ 
  products, 
  bannerMode = false 
}) {
  return (
    <>
      { bannerMode && (
        <Image src={products.banner.image} alt={products.banner.name} className="absolute top-0 left-0 h-full max-w-[55%]" />
      ) }
      <Swiper freeMode={true} slidesPerView={2.2} spaceBetween={8}>
        { bannerMode && (
          <SwiperSlide>
            <Link href={`/shop/search?category=${products.name}`} className="w-full h-full block"></Link>
          </SwiperSlide>
        ) }
        {products?.products?.map((product, index) => (
          <SwiperSlide key={index}>
            <ProductCard data={product} />
          </SwiperSlide>
        ))}
      </Swiper>
      { !products ? <SkeletonProduct /> : ''}
    </>
  )
}