import React, { useContext } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { AuthContext } from "../../context/AuthContext";
import { FaChartBar, FaBook, FaClipboardList, FaHome, FaTools, FaUserCircle } from "react-icons/fa";
import "./Sidebar.css";

function Sidebar() {
  const navigate = useNavigate();
  const location = useLocation();

  const { userLogin } = useContext(AuthContext);

  const menuAdmin = [
    { icon: <FaChartBar />, label: "Dashboard", path: "/dashboard-admin" },
    { icon: <FaBook />, label: "Kelola Kursus", path: "/kelola-kursus" },
    { icon: <FaClipboardList />, label: "Laporan", path: "/laporan" },
  ];

  const menuUser = [
    { icon: <FaHome />, label: "Dashboard", path: "/dashboard-user" },
    { icon: <FaBook />, label: "Kursus", path: "/courses" },
  ];

  const menuList = userLogin?.role === "admin" ? menuAdmin : menuUser;

  const isAktif = (path) => location.pathname === path;

  return (
    <div className="sidebar">
      <div className="sidebar-header">
        <span className="sidebar-title d-flex align-items-center gap-2">
          {userLogin?.role === "admin" ? (
            <>
              <FaTools /> Panel Admin
            </>
          ) : (
            <>
              <FaUserCircle /> Menu User
            </>
          )}
        </span>
      </div>

      <nav className="sidebar-nav">
        {menuList.map((menu) => (
          <button
            key={menu.path}
            className={`sidebar-menu-item ${isAktif(menu.path) ? "aktif" : ""}`}
            onClick={() => navigate(menu.path)}
          >
            <span className="menu-icon">{menu.icon}</span>
            <span className="menu-label">{menu.label}</span>
          </button>
        ))}
      </nav>
    </div>
  );
}

export default Sidebar;
