import PopularProductSkeleton from "@/lib/home/components/Skeleton/PopularProductSkeleton"
import useProductSimilar from "../hooks/useProductSimilar"
import ProductSlider from "./ProductSlider"

const ProductSimilar = ({ query }) => {
  const { productSimilar } = useProductSimilar({ query })

  if (productSimilar.isLoading) {
    return <PopularProductSkeleton />
  }

  return <ProductSlider products={productSimilar.data} />
}

export default ProductSimilar