import React from "react"
import PropTypes from "prop-types"
import axios from 'axios'

import Header from '~/components/header'
import Footer from '~/components/footer'
import "../styles/layout.css"

Layout.getInitialProps = async ({Component, ctx}) => {
  // Configure axios instance
  ctx.axios = axios.create({
    headers: ctx.req ? {cookie: ctx.req.headers.cookie} : undefined
  })

  const {data: user} = await ctx.axios.get(`/api/auth`)

  let pageProps = {};
  if(Component.getInitialProps)
    pageProps = await Component.getInitialProps({ctx})

  return {pageProps, user}
}

function Layout({ Component, pageProps, user }){
  return (
    <>
      <Header user={user} />
      <main><Component {...{user, ...pageProps}} /></main>
      <Footer/>
    </>
  )
}

Layout.propTypes = {
  pageProps: PropTypes.object
}

export default Layout