import React, { useContext } from "react";
import { Nav, Container, Navbar } from "react-bootstrap";
import { Link } from "wouter";
import UserContext from "../contexts/UserContext";

const MyNavbar = () => {
  const { currentUser } = useContext(UserContext);

  const MyLink = ({ children, ...rest }) => {
    return (
      <Nav.Link as={Link} {...rest}>
        {children}
      </Nav.Link>
    );
  };

  return (
    <Navbar variant="dark" bg="dark" expand="lg">
      <Container>
        <Navbar.Brand as={Link} href="/">LearningTree</Navbar.Brand>
        <Navbar.Toggle aria-controls="navbar-nav" />
        <Navbar.Collapse id="navbar-nav">
          <Nav className="ms-auto">
            <MyLink href="/">Home</MyLink>
            {(currentUser?.id && <MyLink href="/logout">Logout</MyLink>) || (
              <MyLink href="/login">Login</MyLink>
            )}
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
};

export default MyNavbar;