import { PageHeader } from '@/components/Page/Header'
import { getAuthorBySlug } from '@/lib/content/taxonomy/authors'
import { getTagBySlug } from '@/lib/content/taxonomy/tags'
import type { ArticleContent } from '~/types/keystatic'

interface ArticleLayoutProps {
  article: ArticleContent
  breadcrumbs: string[]
  children: React.ReactNode
  className?: string
}

export async function ArticleLayout({
  article,
  breadcrumbs,
  children,
  className = 'page',
}: ArticleLayoutProps) {
  const author = article.publishing?.author
    ? await getAuthorBySlug(article.publishing.author)
    : null
  const tags = article.publishing?.tags
    ? await Promise.all(article.publishing.tags.map(getTagBySlug))
    : []

  return (
    <div className={className}>
      <PageHeader
        article={article}
        breadcrumbs={breadcrumbs}
        author={author}
        tags={tags}
      />
      {children}
    </div>
  )
}
