import { Swiper, SwiperSlide } from "swiper/react"
import ProductCard from "./ProductCard"
import "swiper/css"
import Image from "@/core/components/elements/Image/Image"
import Link from "@/core/components/elements/Link/Link"
import { useState } from "react"

const bannerClassName = 'absolute rounded-r top-0 left-0 h-full max-w-[52%] idt-transition border border-gray_r-6'

const ProductSlider = ({ 
  products, 
  simpleTitle = 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={`${bannerClassName} ${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 product={product} simpleTitle={simpleTitle} />
          </SwiperSlide>
        )) }
      </Swiper>
    </>
  )
}

export default ProductSlider