nav

import React from 'react';
import useAuth from '../../hooks/useAuth';
import './Header.css';
import { Container, Nav, Navbar, NavDropdown } from 'react-bootstrap';
const Header = () => {
    const { user, logOut } = useAuth();
    return (
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
  <Container>
  <Navbar.Brand href="/home"><img src="https://cdn.shopify.com/s/files/1/0436/6696/4634/t/2/assets/logo.png?v=13910187634999549241" alt="" srcset="" /></Navbar.Brand>
  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  <Navbar.Collapse id="responsive-navbar-nav">
    <Nav className="me-auto">
    <Nav.Link href="/home">HOME</Nav.Link>
      <Nav.Link    href="/services">PRODUCTS</Nav.Link>
      <Nav.Link   href="/features">FEATURES</Nav.Link>
      <Nav.Link   href="/gallery">GALLERY</Nav.Link>
      <div>
{user.email && (
            <NavDropdown title="ADMIN" id="collasible-nav-dropdown">
            <NavDropdown.Item href="/addPacakageService">ADD SERVICES</NavDropdown.Item>
            <NavDropdown.Item  href="/manageAllOrders">MANAGE ORDERS</NavDropdown.Item>
            <NavDropdown.Item  href="/myOrders">MY ORDERS</NavDropdown.Item>
    
            
          </NavDropdown>

              
            )}
          </div>

         
    </Nav>
    {user.email && (
            <Nav className="text-white mr-2">
             {user.displayName || user.email}{" "}
            </Nav>
          )}
    {
              user.email ?
              <Nav >
                <Nav.Link
                href="/home"
                onClick={logOut}
                className="text-sm px-4 py-2 leading-none border rounded text-white border-black hover:border-transparent  hover:bg-yellow-600  text-gray-800"
              >
                LOG OUT
              </Nav.Link>
              </Nav>
              

                  :
    <Nav>
    <Nav.Link  className="text-sm px-4 py-2 leading-none border rounded text-white border-black hover:border-transparent  hover:bg-yellow-600 text-gray-800 mr-4"  href="/login">SIGN IN</Nav.Link>
                    <Nav.Link className="text-sm px-4 py-2 leading-none border rounded text-white border-black hover:border-transparent  hover:bg-yellow-600  text-gray-800 mr-4" eventKey={2}  href='/register'  >REGISTER </Nav.Link>
    </Nav>
}
  </Navbar.Collapse>
  </Container>
</Navbar>

/* <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
  <Container>
  <Navbar.Brand href="/home"><img src="https://cdn.shopify.com/s/files/1/0436/6696/4634/t/2/assets/logo.png?v=13910187634999549241" alt="" srcset="" /></Navbar.Brand>
  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  <Navbar.Collapse id="responsive-navbar-nav">
    <Nav className="me-auto">
      <Nav.Link href="/home">HOME</Nav.Link>
      <Nav.Link    href="/services">SERVICES</Nav.Link>
      <Nav.Link   href="/features">FEATURES</Nav.Link>
      <Nav.Link   href="/gallery">GALLERY</Nav.Link>
       
      <div>
{user.email && (
            <NavDropdown title="Admin" id="collasible-nav-dropdown">
            <NavDropdown.Item href="/addPacakageService">ADD SERVICES</NavDropdown.Item>
            <NavDropdown.Item  href="/manageAllOrders">MANAGE ORDERS</NavDropdown.Item>
            <NavDropdown.Item  href="/myOrders">MY ORDERS</NavDropdown.Item>
    
            
          </NavDropdown>

              
            )}
          </div>

          {user.email && (
            <span className="text-white">
             {user.displayName || user.email}{" "}
            </span>
          )}
          
          {
              user.email ?
              <Nav >
                <Nav.Link
                href="/home"
                onClick={logOut}
                className="text-sm px-4 py-2 leading-none border rounded text-white border-black hover:border-transparent  hover:bg-red-500  text-gray-800"
              >
                LOG OUT
              </Nav.Link>
              </Nav>
              

                  :
                  <Nav >
                    <Nav.Link    href="/login">SIGN IN</Nav.Link>
                    <Nav.Link eventKey={2}  href='/register'  >REGISTER </Nav.Link>
      
    </Nav>

                
          }
      
    </Nav>
  </Navbar.Collapse>
  </Container>
</Navbar> */

     
    );
};

export default Header;