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

export default function ProductSlider({ products }) {
  return (
    <>
      <Swiper freeMode={true} slidesPerView={2.15} spaceBetween={8}>
        {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>
      ) : ''}
    </>
  )
}