import "./navStyleImpl.css";
import CezenBanner from "../login-logout/cezenBanar";
import operationsLogo from "../../assets/hammer-spanner-svgrepo-com.svg";
import profileLogo from "../../assets/profile-circle-svgrepo-com.svg";
import NavBarDropDown from "./drop_down/navBarDropDown";

import { useNavigate } from "react-router-dom";
import { useState } from "react";

export default function NavBar() {
  const navTo = useNavigate();

  return (
    <nav className="navigation">
      <div>
        <CezenBanner className="cezen_banner_top" />
      </div>
      <div className="nav-item">
        <div className="RHS_nav ops">
          <div className="RHS_nav_pill">
            <img src={operationsLogo} />
            <span> operations</span>
          </div>
          <div className="drop-down pos_operations">
            <NavBarDropDown>
              {/* css is defined in the NavBarDropDown.css folder*/}
              <li
                onClick={() => {
                  navTo("/end-points");
                }}
              >
                End-Points
              </li>
              <li
                onClick={() => {
                  navTo("/features");
                }}
              >
                Features
              </li>
              <li>Groups</li>
            </NavBarDropDown>
          </div>
        </div>
        <div className="RHS_nav prof">
          <div className="RHS_nav_pill">
            <img src={profileLogo} />
            <span className="profile_text"> profile</span>
          </div>
          <div className="drop-down pos_profile">
            <NavBarDropDown>
              {/* css is defined in the NavBarDropDown.css folder*/}
              <li
                onClick={() => {
                  navTo("/edit-profile");
                }}
              >
                Edit Profile
              </li>
              <li
                className="log-out"
                onClick={() => {
                  console.log("logout");
                  navTo("/log-in");
                }}
              >
                Log-Out
              </li>
            </NavBarDropDown>
          </div>
        </div>
      </div>
    </nav>
  );
}