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

import './style';

interface Props {
  children?: React.ReactNode;
}

function ApplicationLayout({children}: Props): React.ReactElement {
  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 as={Link} to='/pokemon'>
                View Pokemon
              </Nav.Link>
            </Nav>
            <Form inline>
              <FormControl className='mr-sm-2' placeholder='Search' type='text' />
              <Button variant='primary'>Search</Button>
            </Form>
          </Navbar.Collapse>
        </Navbar>
      </nav>

      <div>{children}</div>
    </div>
  );
}

export default ApplicationLayout;