import Breadcrumbs from '@material-hu/components/design-system/Breadcrumbs';

import { useArticleBreadcrumb } from '../../hooks/useArticleBreadcrumb';
import { useArticleId } from '../../hooks/useArticleId';
import { useGetArticleTree } from '../../hooks/useGetArticleTree';

export const ArticleBreadcrumbs = () => {
  const { articleId } = useArticleId();
  const articleTree = useGetArticleTree(articleId);
  const articleBreadcrumb = useArticleBreadcrumb(articleTree.data);

  return (
    <Breadcrumbs
      links={articleBreadcrumb}
      loading={articleTree.isLoading}
    />
  );
};