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