import Header from './Header'
import Meta from './Meta'
import Footer from './Footer'
import GlobalStyle from '../../styles/global'
import { useContext, FunctionComponent } from 'react'
import { UserContext } from '../../user/hooks'
import { LoginPage } from '../../user'

const Page: FunctionComponent = ({ children }) => {
  const { user } = useContext(UserContext)
  return (
    <>
      <Meta />

      <Header />
      <main>
        {(!user || user.loading) && <p>Please wait...</p>}
        {user?.error && <p>Error logging in.</p>}
        {!user?.data && <LoginPage />}
        {children}
      </main>
      <Footer />

      <style jsx global>
        {GlobalStyle}
      </style>
    </>
  )
}

export default Page