'use client'
import { FC } from 'react'
import ProductCard from '@/components/ProductCard'
import Image from 'next/image'
import { Swiper, SwiperSlide } from 'swiper/react';


const HotOffer: FC = () => {
    return (
        <div className=' bg-[#F2F2F2] rounded-2xl flex py-6'>
            <div className='px-6 min-w-[140px] max-w-[180px] flex flex-col justify-center'>
                <div className='text-center text-primary font-extrabold text-sm'>
                    پیشنهاد های
                    <br />
                    داغ
                    <br />
                    سندس
                    کالا
                </div>
                <div className='mt-6 flex justify-center'>
                    <Image
                        src={'/images/hot_offer.png'}
                        alt=''
                        width={120}
                        height={150}
                        className='max-w-full h-auto'
                    />
                </div>
            </div>

            <div className='flex-1 overflow-hidden px-4'>
                <Swiper
                    spaceBetween={16}
                    slidesPerView={'auto'}
                    className='h-full'
                >
                    <SwiperSlide className='!w-auto'>
                        <ProductCard />
                    </SwiperSlide>
                    <SwiperSlide className='!w-auto'>
                        <ProductCard />
                    </SwiperSlide>
                    <SwiperSlide className='!w-auto'>
                        <ProductCard />
                    </SwiperSlide>
                    <SwiperSlide className='!w-auto'>
                        <ProductCard />
                    </SwiperSlide>
                </Swiper>
            </div>
        </div>
    )
}

export default HotOffer