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


const NewestProducts: FC = () => {

    const { data: landing } = useGetLanding()


    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 h-[380px]'>
                        {
                            landing?.results?.latestProducts?.map((product) => (
                                <CarouselItem key={product._id} className="basis-[240px] sm:basis-[292px]">
                                    <ProductCard item={product} />
                                </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>
    )
}

export default NewestProducts