import ProductSlider from "@/lib/product/components/ProductSlider"
import useCategoryHome from "../hooks/useCategoryHome"
import PopularProductSkeleton from "./Skeleton/PopularProductSkeleton"

const CategoryHome = ({ id }) => {
  const { categoryHome } = useCategoryHome({ id })
  
  return (
    <div className="p-4 relative bg-yellow_r-2">
      { categoryHome.data ? (
        <ProductSlider 
          products={{
            products: categoryHome.data?.[0].products,
            banner: {
              image: categoryHome.data?.[0].image,
              name: categoryHome.data?.[0].name,
              url: `/shop/search?category=${categoryHome.data?.[0].name}`
            }
          }} 
          simpleTitle
          bannerMode
        />
      ) : <PopularProductSkeleton /> }
    </div>
  )
}

export default CategoryHome