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

const ProductSimilar = ({ query }) => {
  const source = "bottom"
  const { productSimilar } = useProductSimilar({ query, source })

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

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

export default ProductSimilar