import { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSignOut, faUser } from "@fortawesome/free-solid-svg-icons";
import { useAuth } from "../../context/auth_context";
import { Link } from "react-router-dom";
import './assets/styles/style.css';

export const AdminPanelNavBar = () => {
  const {user, logout} = useAuth();
  const [toggle, setToggle] = useState(false);

  const handleLogout = () => {
    logout();
  };
    
  return (
    <div className="navbar">
      <div className="profile">
        <img src={require("./assets/images/Admin-595b40b65ba036ed117d36fe.png")} className="user-pic" 
          onClick={() => setToggle(!toggle)}/>
        {toggle && 
        <div className="profile-sub-menu-wrap">
          <div className="sub-menu" >
            <div className="user-info">
              <img src={require("./assets/images/Admin-595b40b65ba036ed117d36fe.png")}/>
              <h3>Superadmin</h3>
            </div>
            <hr/>

            <Link to="/" className="sub-menu-link">
              <FontAwesomeIcon icon={faUser} className="sub-menu-link-icon"/>
              <p>Editar cuenta</p>
            </Link>

            <Link onClick={handleLogout} to="/" className="sub-menu-link">
              <FontAwesomeIcon icon={faSignOut} className="sub-menu-link-icon"/>
              <p>Cerrar sesión</p>
            </Link>
          </div>
        </div>
        }
      </div>
    </div>
  );
}