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