import Head from 'next/head'
import styles from '../styles/Home.module.css'
import HeaderNav from '../lib/HeaderNav'
import HeroImage from '../lib/HeroImage'
import PostsList from '../lib/PostsList'
import { getSortedPostsData } from '../lib/posts'
import { serialize } from 'next-mdx-remote/serialize'

export async function getStaticProps() {
  const allPostsData = await getSortedPostsData(serialize)
  return {
    props: {
      allPostsData,
    }
  }
}

export default function Posts({ allPostsData }) {
  return (
    <div className={styles.container}>
      <HeaderNav />
      <HeroImage image="https://source.unsplash.com/IIDxzNru2GY/3841x2160" credit={{ url: "https://unsplash.com/photos/IIDxzNru2GY", text: "Csabi Elter" }} withGradient="top-black">
        Posts
      </HeroImage>
      <Head>
        <title>Posts | Luke Granger-Brown</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <PostsList posts={allPostsData} />
      </main>
    </div>
  )
}