import { Swiper, SwiperSlide } from "swiper/react";
import ProductCard from "./ProductCard";
import ImagePlaceholderIcon from "../../icons/image-placeholder.svg";
import "swiper/css";
import Image from "../elements/Image";
import Link from "../elements/Link";

export default function ProductSlider({ 
  products, 
  bannerMode = false 
}) {
  return (
    <>
      { bannerMode && (
        <Image src={products.image} alt={products.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 == null ? (
        <div className="grid grid-cols-2 gap-x-4">
          <div role="status" className="p-4 max-w-sm rounded border border-gray-300 shadow animate-pulse md:p-6">
            <div className="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded">
            <ImagePlaceholderIcon className="w-12 h-12 text-gray-200" />
            </div>
            <div className="h-2 bg-gray-200 rounded-full w-10 mb-1"></div>
            <div className="h-2.5 bg-gray-200 rounded-full w-full mb-4"></div>
            <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
            <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
            <div className="h-2 bg-gray-200 rounded-full"></div>
            <span className="sr-only">Loading...</span>
          </div>
          <div role="status" className="p-4 max-w-sm rounded border border-gray-300 shadow animate-pulse md:p-6">
            <div className="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded">
              <ImagePlaceholderIcon className="w-12 h-12 text-gray-200" />
            </div>
            <div className="h-2 bg-gray-200 rounded-full w-10 mb-1"></div>
            <div className="h-2.5 bg-gray-200 rounded-full w-full mb-4"></div>
            <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
            <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
            <div className="h-2 bg-gray-200 rounded-full"></div>
            <span className="sr-only">Loading...</span>
          </div>
        </div>
      ) : ''}
    </>
  )
}