import React from 'react';
import {Navbar, Nav, NavDropdown, Form, FormControl, Button} from 'react-bootstrap';
import {LinkContainer} from 'react-router-bootstrap';
import {Link} from 'react-router-dom';

import style from './style';

class ApplicationLayout extends React.Component {
  render() {
    return (
      <div>
        <nav>
          <Navbar expand="md">
            <LinkContainer to="/">
              <Navbar.Brand>Pokemon.trade</Navbar.Brand>
            </LinkContainer>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
              <Nav className="mr-auto">
                <Nav.Link to="/pokemon" as={Link}>
                  View Pokemon
                </Nav.Link>
              </Nav>
              <Form inline>
                <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                <Button variant="primary">Search</Button>
              </Form>
            </Navbar.Collapse>
          </Navbar>
        </nav>

        <div>{this.props.children}</div>
      </div>
    );
  }
}

export default ApplicationLayout;