import { notFound } from 'next/navigation'
import Markdown from 'markdown-to-jsx'

import InfoBar from '~/components/InfoBar'
import { getPostSlugs, loadSinglePage } from '~/utils/post'

export async function generateStaticParams() {
  const slugs = await getPostSlugs()
  return slugs.map((slug: string) => ({ slug }))
}

export default async function Post({ params: { slug } }) {
  const post = await loadSinglePage(slug)
  if (!post) notFound()

  return (
    <>
      <h1 className="pageTitle">
        {post.title}
      </h1>
      <main className="mainColumn">
        <InfoBar authorName={post.author} publishedDate={post.date} />
        <Markdown>{post.body}</Markdown>
      </main>
    </>
  )
}