import styles from '@styles/Home.module.css'
import Header from '@components/header'
import PageSeo from '@components/page-seo'
import HomeComponent from '@components/home'
import { Page, Text } from '@geist-ui/core'
import { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps = async ({ res }) => {
  try {
    const resp = await fetch(process.env.API_URL + `/welcome`,
      {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          "x-secret-key": process.env.SECRET_KEY || ''
        }
      })

    const { title, content, rendered } = await resp.json()

    res.setHeader(
      'Cache-Control',
      `public, s-maxage=${60 * 60 * 24 * 360}, max-age=${60 * 60 * 24 * 360}`
    )

    return {
      props: {
        introContent: content || null,
        rendered: rendered || null,
        introTitle: title || null,
      }
    }
  } catch (error) {
    return {
      props: {
        error: true
      }
    }
  }
}

type Props = {
  introContent: string
  introTitle: string
  rendered: string
  error?: boolean
}

const Home = ({ rendered, introContent, introTitle, error }: Props) => {
  return (
    <Page className={styles.wrapper}>
      <PageSeo />
      <Page.Content className={styles.main}>
        {error && <Text>Something went wrong. Is the server running?</Text>}
        {!error && <HomeComponent rendered={rendered} introContent={introContent} introTitle={introTitle} />}
      </Page.Content>
    </Page>
  )
}

export default Home