import { Metadata } from "next"
import { getPostSlugs, loadSinglePage } from "~/utils/post"
import Markdown from 'markdown-to-jsx'

import styles from "~/styles/post.module.css"

export async function generateMetadata({ params: { slug } }: { params: { slug: string } }): Promise<Metadata> {
  const post = await loadSinglePage(slug)

  return {
    title: post?.title
  }
}

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

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

  if (!post)
    return null

  return (
    <>
      <article className={styles.post}>
        <span>{post.date.toLocaleDateString('en-US', { timeZone: 'UTC' })}</span>
        <h1>{post.title}</h1>
        <p className={styles.subtitle}>{post.subtitle}</p>

        <Markdown>{post.body}</Markdown>
      </article>
    </>
  );
}