import { LazyLoadComponent } from "react-lazy-load-image-component"
import useCategoryHomeId from "../hooks/useCategoryHomeId"
import CategoryHome from "./CategoryHome"

const CategoryHomeId = () => {
  const { categoryHomeIds } = useCategoryHomeId()

  return (
    <div className="flex flex-col gap-y-6">
      { categoryHomeIds.data?.map((id) => (
        <LazyLoadComponent key={id}>
          <CategoryHome id={id} />
        </LazyLoadComponent>
      )) }
    </div>
  )
}

export default CategoryHomeId