import React from 'react';
import { Navbar, NavItem, Nav, FormGroup, FormControl, Button } from 'react-bootstrap';
import { Link, withRouter } from 'react-router-dom';
import './navbar.css';

const NavBar = (props) => {
    return (<Navbar inverse collapseOnSelect>
        <Navbar.Header>
          <Navbar.Brand>
            <a href="#brand">{props.brand}</a>
          </Navbar.Brand>
          <Navbar.Toggle />
        </Navbar.Header>
        <Navbar.Collapse>
        <Navbar.Form pullLeft>
            <FormGroup>
                <FormControl type="text" placeholder="Search" />
            </FormGroup>{' '}
            <Button type="submit">Submit</Button>
        </Navbar.Form>
          <Nav pullRight>
            <NavItem >
              <Link to="/" className="link">Home</Link>
            </NavItem>
            <NavItem >
              <Link to="/about" className="link">About</Link>
            </NavItem>
          </Nav>
          </Navbar.Collapse>
        </Navbar>);
}

export default NavBar;