import { Swiper, SwiperSlide } from 'swiper/react'
import usePopularProduct from '../hooks/usePopularProduct'
import ProductCard from '@/lib/product/components/ProductCard'
import PopularProductSkeleton from './Skeleton/PopularProductSkeleton'
import ProductSlider from '@/lib/product/components/ProductSlider'

const PopularProduct = () => {
  const { popularProducts } = usePopularProduct()

  return (
    <div className='px-4'>
      <div className='font-medium mb-4'>Produk Populer</div>
      {popularProducts.isLoading && <PopularProductSkeleton />}
      {!popularProducts.isLoading && (
        <ProductSlider
          products={popularProducts.data}
          simpleTitle
        />
      )}
    </div>
  )
}

export default PopularProduct