import React from 'react'
import { Routes, Route } from 'react-router-dom'
import styled from 'styled-components'
import { Header } from './components/organisms/header'
import AccountPage from './components/pages/account'

import HomePage from './components/pages/home'
import IndexPage from './components/pages/index/index'
import LoginPage from './components/pages/login'
import { AuthProvider } from './state/AuthProvider'

function App() {
  return (
    <AuthProvider>
      <header>
        <Header />
      </header>
      <main>
        <Routes>
          <Route path="account" element={<AccountPage />} />
          <Route path="login" element={<LoginPage />} />
          <Route path="home" element={<HomePage />} />
          <Route path="/" element={<IndexPage />} />
        </Routes>
      </main>
    </AuthProvider>
  )
}

const StyledApp = styled(App)`
  :root {
    --primary-yellow: #fed925;
  }

  code {
    display: block;
    width: 500px;
    text-align: left;
  }
`

export default StyledApp