import Header from './header'
import PostHeader from './post-header'
import PostBody from './post-body'
import SectionSeparator from './section-separator'
import Head from 'next/head'
import { CMS_NAME } from '../lib/constants'

export default function PostDetails({ post }) {
  return (
    <>
      <Header />
      <article>
        <Head>
          <title>
            {`${post.title} | Next.js Blog Example with ${CMS_NAME}`}
          </title>
          <meta property="og:image" content={post.ogImage.url} />
        </Head>
        <PostHeader
          title={post.title}
          coverImage={post.coverImage}
          date={post.date}
          author={post.author}
        />
        <PostBody content={post.content} />
      </article>
      <SectionSeparator />
    </>
  )
}

// The data returned here will be send as `props` to the component
PostDetails.getCustomInitialProps = async function ({ client, pageInSitemap }) {
  const contentID = pageInSitemap.contentID
  const post = await client.getPostDetails({ contentID })

  return {
    post,
  }
}
