import { notFound } from "next/navigation";
import { TechDocPage } from "@/components/tech-doc-page";
import { frontendArticles, getFrontendArticle } from "@/content/notes/frontend/articles";
import { getTechArticle } from "@/lib/tech-article";

type PageProps = {
  params: Promise<{
    slug: string;
  }>;
};

export function generateStaticParams() {
  return frontendArticles.map((article) => ({ slug: article.slug }));
}

export default async function FrontendArticlePage({ params }: PageProps) {
  const { slug } = await params;
  const articleMeta = getFrontendArticle(slug);

  if (!articleMeta) {
    notFound();
  }

  const article = getTechArticle(`frontend/${articleMeta.file}`);

  return (
    <TechDocPage
      eyebrow="Frontend notes"
      title={articleMeta.title}
      description={articleMeta.description}
      contentHtml={article.contentHtml}
      toc={articleMeta.slug === "code-output" ? [] : article.toc}
    />
  );
}
