import { notFound } from "next/navigation";
import { appRouter } from "@repo/core-api";
import { bindAll } from "../../../server/bind-production";

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

export default async function BlogPostPage({ params }: PageProps) {
  await bindAll();
  const { slug } = await params;
  const caller = appRouter.createCaller({});
  const article = await caller.blog.articleBySlug({ slug });

  if (!article) notFound();

  return (
    <main>
      <article>
        <header>
          <h1>{article.title}</h1>
          {article.createdAt ? (
            <time dateTime={article.createdAt.toISOString()}>
              {article.createdAt.toLocaleDateString()}
            </time>
          ) : null}
        </header>
        <pre style={{ whiteSpace: "pre-wrap" }}>
          {JSON.stringify(article.content, null, 2)}
        </pre>
      </article>
    </main>
  );
}