import React, { Component } from 'react';
import { NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
import './styles/App.css';

const MainNav = (user) => {

  const UserAvailable = () => {
    console.log("user available: " + user.email)
    return (
      <NavLink href="/Accounts/">My account</NavLink>
    )
  }
  
  const UserNotAvailable = () => {
    console.log("user not available: " + user.email)
    return (
      <NavLink href="/Login/">Login</NavLink>
    )
  }

  return (
    <div>
      <Nav style={{backgroundColor: "#E0F1F4"}}>
        <NavbarBrand href="/">Home</NavbarBrand>
        <div className = "ml-auto">
        <Nav>
          <NavItem>
            <NavLink href="/FindCoach/">Find a Coach</NavLink>
          </NavItem>
          <NavItem>
            <NavLink href="/GamesSelect/">Update gameslist</NavLink>
          </NavItem>
          <NavItem>
            { user === null ? 
                <UserAvailable /> 
              :
                <UserNotAvailable />
            }
          </NavItem>
        </Nav>
        </div>
      </Nav>
    </div>
  )
}

export default MainNav


