import React from 'react';
import { LinkContainer } from 'react-router-bootstrap';
import { Navbar, Nav, Container } from 'react-bootstrap';
import { Cart } from '../component/cart';
import { UserCircleIcon } from '@heroicons/react/24/solid';
import logo_nav from '../../img/sello_blanco.png';
export const Navbar = () => {
return (
<Navbar expand="lg" bg="light">
<Container fluid>
<LinkContainer to="/" as="a">
<Navbar.Brand>
<img src={logo_nav} height="100px" alt="Logo" />
</Navbar.Brand>
</LinkContainer>
<Navbar.Toggle aria-controls="navbar-nav" />
<Navbar.Collapse id="navbar-nav">
<Nav className="me-auto">
<LinkContainer to="/productos/panes">
<Nav.Link>Productos</Nav.Link>
</LinkContainer>
<LinkContainer to="/nosotros">
<Nav.Link>Nosotros</Nav.Link>
</LinkContainer>
<LinkContainer to="/catering">
<Nav.Link>Catering</Nav.Link>
</LinkContainer>
<LinkContainer to="/contacto">
<Nav.Link>Contacto</Nav.Link>
</LinkContainer>
</Nav>
<Nav className="containerNavIcons">
<LinkContainer to="/signup">
<Nav.Link>
<UserCircleIcon className="icon" style={{ height: '2rem', width: '2rem', color: '#fff' }} />
</Nav.Link>
</LinkContainer>
<Nav.Link>
<Cart />
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
};