import { BrowserRouter, Switch } from "react-router-dom";

import { Nav } from 'components'
import { AccountPage, HomePage, OrderShowPage, OrdersPage } from 'pages';
import { GoogleAuthProvider } from 'hooks'
import { PublicRoute, PrivateRoute } from 'router'
import { StyleProvider } from 'styles'

const MainRouter: React.FC = () => {
    return (
        <StyleProvider>
            <BrowserRouter>
                <GoogleAuthProvider>
                    <body>
                        <Nav />
                        <main className="content">
                            <Switch>
                                <PrivateRoute path="/account" component={AccountPage} />
                                <PublicRoute exact path="/" component={HomePage} />
                                <PrivateRoute path="/orders/:id" component={OrderShowPage} />
                                <PrivateRoute path="/orders" component={OrdersPage} />
                            </Switch>
                        </main>
                    </body>
                </GoogleAuthProvider>
            </BrowserRouter>

        </StyleProvider>
    )
}

export default MainRouter