import './App.css';
import { Switch,Route, Redirect } from 'react-router-dom';
import Navigation from './components/Navigation/Navigation';
import BeerDetails from './components/BeerDetails/BeerDetails';
import CreateRecord from './components/CreateRecord/CreateRecord';
import Login from './components/Login/Login';
import Register from './components/Register/Register';
import Home from './components/Home/Home';
import Profile from './components/Profile/Profile';

function App() {
  return (
    <div className="App"> 
    
      <header className="mainHeader">
        <img src="Beer-icon.png"  className="headerImg" alt="beer"></img>
        <h1>Бирометър</h1>
    
      </header>
        <Navigation/>
        <main>
        <Switch>
                    <Route path="/" exact component={Home} />
                    <Route path="/create-record" component={CreateRecord} />
                    <Route path="/login" component={Login} />
                    <Route path="/register" component={Register} />
                    <Route path="/beers/:beerId" component={BeerDetails} />
                    <Route path="/profile" exact component={Profile} />
                    <Route path="/logout" render={(props) => {
                        console.log('Logged Out!!!');

                        return <Redirect to="/" />
                    }} />
                </Switch>
        </main>
        
     
    </div>
  );
}

export default App;