import MarkdocRenderer from '@/components/Markdoc/Renderer'
import { getArticleBySlug, getArticles } from '@/lib/content/meta/articles'
import { notFound } from 'next/navigation'

interface Props {
  params: Promise<{
    slug: string
  }>
}

export async function generateStaticParams() {
  const articles = await getArticles()
  return articles.map(({ slug }) => ({ slug }))
}

export default async function MetaArticlePage({ params }: Props) {
  const { slug } = await params
  const article = await getArticleBySlug(slug)

  if (!article) {
    notFound()
  }

  return (
    <div className="page">
      <h1>{article.title}</h1>
      <MarkdocRenderer content={article.content} className="meta-content" />
    </div>
  )
}
