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";
import { useState } from "react";

export default function ProductSlider({ 
  products, 
  simpleProductTitleLine = false,
  bannerMode = false 
}) {
  const [ activeIndex, setActiveIndex ] = useState(0);
  const swiperSliderFirstMove = (swiper) => {
    setActiveIndex(swiper.activeIndex);
  };

  return (
    <>
      { bannerMode && (
        <Image src={products.banner.image} alt={products.banner.name} className={`absolute rounded-r top-0 left-0 h-full max-w-[52%] idt-transition border border-gray_r-6 ` + (activeIndex > 0 ? 'opacity-0' : 'opacity-100')} />
      ) }
      <Swiper freeMode={true} slidesPerView={2.2} spaceBetween={8} onSlideChange={swiperSliderFirstMove} prefix="product">
        { bannerMode && (
          <SwiperSlide>
            <Link href={products.banner.url} className="w-full h-full block"></Link>
          </SwiperSlide>
        ) }
        {products?.products?.map((product, index) => (
          <SwiperSlide key={index}>
            <ProductCard data={product} simpleProductTitleLine={simpleProductTitleLine} />
          </SwiperSlide>
        ))}
      </Swiper>
      { !products ? <SkeletonProduct /> : ''}
    </>
  )
}