import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import AuthHeader from './auth-header';
import NavLink from '../../shared/nav-link';

function Header() {
  return (
    <header className='mb-4'>
      <Navbar bg='secondary' variant='dark' expand='lg'>
        <Navbar.Brand href='/' className='d-none d-sm-block'>
          MED FLASH
        </Navbar.Brand>
        <div className='flex-grow-1 mx-4'>
          <AuthHeader />
        </div>
        <Navbar.Toggle aria-controls='basic-navbar-nav' />
        <Navbar.Collapse id='basic-navbar-nav' className='flex-shrink-1 flex-grow-0'>
          <Nav className='mr-auto'>
            <NavLink to='/cards/create' content='آپلود فلش کارت' />
            <NavLink to='/cards' content='فلش کارت‌ها' />
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </header>
  );
}

export default Header;
