import Head from 'next/head'
import styles from '../../styles/Post.module.scss'
import HeaderNav from '../../lib/HeaderNav'
import HeroImage from '../../lib/HeroImage'
import { getPostSlugs, getPostBySlug } from '../../lib/posts'
import { mdxComponents } from '../../lib/posts-edge'
import { MDXRemote } from 'next-mdx-remote'
import { serialize } from 'next-mdx-remote/serialize'

export async function getStaticPaths() {
  return {
    paths: (await getPostSlugs()).map((slug) => ({
      params: {
        slug,
      }
    })),
    fallback: false,
  }
}

export async function getStaticProps({ params }) {
  return {
    props: {
      postData: await getPostBySlug(params.slug, serialize),
    }
  }
}

function generateCredit(postData) {
  if (!postData['hero credit']) return null;
  return {
    url: postData['hero credit'],
    text: postData['hero credit text'],
  }
}

export default function Post({ postData }) {
  return (
    <div className={styles.container}>
      <HeaderNav />
      <HeroImage image={postData.hero} credit={generateCredit(postData)} withGradient="top-black">
        {postData.title}
      </HeroImage>
      <Head>
        <title>{postData.title} | Luke Granger-Brown</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <div className={styles.post}>
          <MDXRemote {...postData.contentMdx} components={mdxComponents} />
        </div>
      </main>
    </div>
  )
}