import React from 'react';
import mano from './mano.svg';
import { Navbar, Nav, Button, Form } from 'react-bootstrap';

function Head(props) {
    return (
        <Navbar bg="light">
            <Navbar.Brand href="/">
                <img src={mano} width="30" height="30" className="d-inline-block align-top" alt="Garbanzo Negro" />
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto">
                    <Nav.Link href="/">Dashboard</Nav.Link>
                    <Nav.Link href="/products">Productos</Nav.Link>
                </Nav>
                <Form inline>
                  <Button
                    variant="outline-success"
                    onClick={props.onLogout}
                  >
                  Salir
                  </Button>
                </Form>
            </Navbar.Collapse>
        </Navbar>
    )
}

export default Head;