---
import DevBanner from '@/components/dev/DevBanner.astro'
import Node from '@/components/markdoc/Node.astro'
import type { Rendered } from '@/lib/markdoc/types'
import type { Article } from '@/lib/site/types'

import BaseLayout from './BaseLayout.astro'

type Props = {
  article: Article
  rendered: Rendered
}

const { article, rendered } = Astro.props
---

<BaseLayout title={article.title} description={article.summary.excerpt || undefined}>
  <DevBanner
    collection={article.collection}
    id={article.id}
    status={article.status}
    diagnostics={rendered.diagnostics}
  />
  <article class="article">
    <h1>{article.title}</h1>
    <div class="prose">
      <Node node={rendered.tree} />
    </div>
  </article>
</BaseLayout>