import { ContentWrapper } from '../../components/ContentWrapper';
import { type Article } from '../../types';

import { ArticleAttachments } from './ArticleAttachments';
import { ArticleBody } from './ArticleBody';
import { ArticleBreadcrumbs } from './ArticleBreadcrumbs';
import { ArticleChildren } from './ArticleChildren';
import { ArticleCover } from './ArticleCover';

export type ArticleDetailProps = { article: Article };

export const ArticleDetail = ({ article }: ArticleDetailProps) => {
  return (
    <ContentWrapper>
      <ArticleBreadcrumbs />
      <ArticleCover coverPicture={article.coverPicture} />
      <ArticleBody
        key={`${article.id}-${article.updatedAt}`}
        body={article.body}
      />
      <ArticleAttachments article={article} />
      <ArticleChildren
        subArticles={article.children}
        isEditor={Boolean(article.isEditor)}
      />
    </ContentWrapper>
  );
};