'use client'
import { FC } from 'react'
import ProductCard from '@/components/ProductCard'
import Image from 'next/image'
import { Swiper, SwiperSlide } from 'swiper/react'
import { SHOP_CONFIG } from '@/config/const'
import { useGetLanding } from '../hooks/useHomeData'


const HotOffer: FC = () => {

    const { data } = useGetLanding()

    const incredibleOffers = data?.results?.incredibleOffers || []

    if (!incredibleOffers.length) {
        return null
    }

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

            <div className='flex-1 overflow-hidden px-2 sm:px-4 mt-4 sm:mt-0'>
                <Swiper
                    spaceBetween={8}
                    slidesPerView={'auto'}
                    className='h-full'
                    breakpoints={{
                        640: {
                            spaceBetween: 16,
                        },
                    }}
                >
                    {incredibleOffers.map((product) => (
                        <SwiperSlide key={product._id} className='!w-auto'>
                            <ProductCard item={product} />
                        </SwiperSlide>
                    ))}
                </Swiper>
            </div>
        </div>
    )
}

export default HotOffer