'use client'
import { FC } from 'react'
import {
    Carousel,
    CarouselContent,
    CarouselItem,
    CarouselNext,
    CarouselPrevious,
} from "@/components/ui/carousel"
import ProductCard from '@/components/ProductCard'
import { useGetPopularProducts } from '../hooks/useHomeData'


const PopularProducts: FC = () => {

    const { data } = useGetPopularProducts();

    if (!!data?.results?.popularProducts?.length)
        return (
            <div>
                <h4 className='text-[#012B4D] text-lg'>محبوب ترین محصولات</h4>
                <div className='mt-2 flex gap-1 text-sm text-[#8C8C8C]'>
                    برای مشاهده ی محبوب ترین محصولات <span className='text-primary'>اینجا کلیک کنید</span>
                </div>

                <div className='mt-10'>
                    <Carousel
                        opts={{
                            align: "start",
                            direction: "rtl",
                        }}
                        className="w-full"
                    >
                        <CarouselContent className='gap-1 sm:gap-2'>
                            {Array.from({ length: 5 }).map((_, index) => (
                                <CarouselItem key={index} className="basis-[240px] sm:basis-[292px]">
                                    <ProductCard />
                                </CarouselItem>
                            ))}
                        </CarouselContent>
                        <CarouselPrevious className="left-auto -right-12 [&_svg]:-scale-x-100" />
                        <CarouselNext className="right-auto -left-12 [&_svg]:-scale-x-100" />
                    </Carousel>
                </div>
            </div>
        )
    return null
}

export default PopularProducts