import "../../styles/components/Navbar.css";

import { useContext } from "react";
import { Link } from "react-router-dom";
import { AuthContext } from "../../context/AuthContext";

export default function Navbar() {
  const { role, logout, username } = useContext(AuthContext);

  return (
    <nav className="navbar">
      <div className="navbar-links">
        <Link to="/">Home</Link>
        <Link to="/settings">Settings</Link>

        {role === "admin" && <Link to="/admin">Admin</Link>}
      </div>

      <div className="navbar-idcard">
        <div className="navbar-idinfo">
          <span className="navbar-username">{username}</span>
          <span className="navbar-role">{role}</span>
        </div>
      </div>

      <button className="navbar-logout" onClick={logout}>
        Logout
      </button>
    </nav>
  );
}