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 ({ctx}) => {
  const {data: user} = await axios.get(`/api/auth`, { headers: ctx.req ? { cookie: ctx.req.headers.cookie } : undefined })
  return {user}
}

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

Layout.propTypes = {
  pageProps: PropTypes.object
}

export default Layout