import { PropsWithChildren } from 'react';

import Container from '@material-hu/mui/Container';

import { Article, BreadcrumbItem } from 'src/types/libraries';

import Breadcrumbs from './Breadcrumbs';
import Header from './Header';

export type LibraryArticleLayoutProps = PropsWithChildren<{
  library: Article;
  links?: BreadcrumbItem[];
  linksLoading?: boolean;
}>;

export const LibraryArticleLayout = ({
  library,
  links = [],
  linksLoading = false,
  children,
}: LibraryArticleLayoutProps) => {
  return (
    <>
      <Header library={library} />
      <Container
        maxWidth="md"
        sx={{
          display: 'flex',
          flexDirection: 'column',
          gap: 3,
        }}
      >
        <Breadcrumbs
          items={links}
          loading={linksLoading}
        />
        {children}
      </Container>
    </>
  );
};

export default LibraryArticleLayout;