import React from 'react';
import './App.css';
import { Navbar } from 'react-materialize';
import MakeMoneyMove from './cash/MakeMoneyMove';
import Cash from './cash/Cash';
import Chips from './chips/Chips';
import { BrowserRouter as Router, Route } from "react-router-dom";
import RoutableNavItem from './common/RoutableNavItem';
import { 
  CRIB,
  CHIPS,
  MAKE_MONEY_MOVE
} from './RouteNames';

function App() {
  return (
    <Router>
      <div className="navbar-fixed">
        <Navbar brand={<a href='/'>GKS</a>} alignLinks="right">
          <RoutableNavItem href={CRIB}>
            Crib
          </RoutableNavItem>

          <RoutableNavItem href={CHIPS}>
            Chips
          </RoutableNavItem>

          <RoutableNavItem>
           Homies
          </RoutableNavItem>

          <RoutableNavItem href={MAKE_MONEY_MOVE}>
            Make Money Move
          </RoutableNavItem>
        </Navbar>
      </div>

      <div className="autoscrolling">
        <Route exact path={CRIB} component={Cash} />
        <Route path={CHIPS} component={Chips} />
        <Route path={MAKE_MONEY_MOVE} component={MakeMoneyMove} />
      </div>
    </Router>
  );
}

export default App;