// app.js
import {
    BrowserRouter,
    Route,
    Link,
    Switch,
    Redirect
} from 'react-router-dom';
import React, { useState, useEffect, state, useContext } from "react";

import {AuthProvider} from "./contextProvider/AuthProvider"

import { Header } from "./component/common/Header"
import { Start } from "./component/common/Start"

import { Login } from "./component/account/Login"

import { Armies } from "./component/game/Armies"
import {Soldiers} from "./component/game/Soldiers"
import {SoldierProfile} from "./component/game/SoldierProfile"

const UserRoute = ({ component: Component, ...rest }) => (

    <Route exact  {...rest} render={(props) => (
        <div className="user__root">
            <Header />
            <div className="user__container">

                <Component {...props} />

            </div>



        </div>
    )}
    />


)

export const App = () => {


    return (

        <BrowserRouter>
            <AuthProvider >
                <Switch>
                    <UserRoute path="/" exact component={Start} />
                    <UserRoute path="/login" component={Login} />
                    <UserRoute path="/armies/:side" component={Armies} />
                    <UserRoute path="/soldiers/:side" component={Soldiers} />
                    <UserRoute path="/soldier/:id" exact component={SoldierProfile} />
                </Switch>
            </AuthProvider>
        </BrowserRouter>

    );
}