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 instructorLinks = [
    {
      label: "Manage Courses",
      link: "/manage",
    },
  ];

  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?.role === "instructor" &&
              instructorLinks.map((item, k) => {
                return <MyLink key={k} href={item.link}>{item.label}</MyLink>;
              })}
            {(currentUser?.id && <MyLink href="/logout">Logout</MyLink>) || (
              <MyLink href="/login">Login</MyLink>
            )}
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
};

export default MyNavbar;