import React from 'react';
import {NavLink} from 'react-router-dom';

const Navbar = () => {
  return (
    <header style={{width:'100%'}}>
      <nav style={{width: 'inherit'}}>
        <ul style={{
          listStyle: 'none',
          margin: 0,
          padding: 0,
          width: '100%',
          textAlign: 'center'
        }}>
          <li style={{
            display: 'inline-block',
            margin: '20px',
          }}>
            <NavLink
              to="/users"
              exact
              activeStyle={{
                  color: '#fa923f',
                  textDecoration: 'underline',
                  fontSize: '1.250em'
              }}>Users</NavLink>
          </li>
          <li style={{
            display: 'inline-block',
            margin: '20px',
          }}>
            <NavLink
              to="/courses"
              exact
              activeStyle={{
                  color: '#fa923f',
                  textDecoration: 'underline',
                  fontSize: '1.250em'
              }}>Courses</NavLink>
          </li>
        </ul>
      </nav>
    </header>
  )
}

export default Navbar;