const menus = {
  super_admin: ["Dashboard", "Applications", "Notaries", "Tax Rules", "Audit Logs", "Settings"],
  ministry_justice: ["Dashboard", "Applications", "Notaries", "Approvals", "Audit Logs", "Settings"],
  ministry_finance: ["Dashboard", "Notaries", "Finance Report", "Audit Logs", "Tax Rules", "Settings"],
  owner: ["Dashboard", "New Transaction", "Transactions", "Staff", "Audit Logs", "Tax Rules", "Settings"],
  teller: ["Dashboard", "Create Transaction", "Pending Files", "Customers"],
  payment: ["Dashboard", "Payments", "Receipts", "Transactions"],
  executive: ["Dashboard", "Approvals", "Returned Files", "Transactions"]
};

const labels = {
  super_admin: "SUPER ADMIN",
  ministry_justice: "JUSTICE",
  ministry_finance: "FINANCE",
  owner: "OWNER",
  teller: "TELLER",
  payment: "PAYMENT",
  executive: "EXECUTIVE"
};

export function Sidebar({ role }) {
  return (
    <aside className="sidebar">
      <div className="brand">
        <img
          src="/NESOS/logo.jpg"
          alt="State logo"
          className="brand-logo"
        />
        <div>
          <p className="brand-title">North East State of Somalia</p>
          <span className="pill">{labels[role]}</span>
        </div>
      </div>

      <nav className="nav-list">
        {menus[role].map((item) => (
          <button key={item} className="nav-item">
            {item}
          </button>
        ))}
      </nav>
    </aside>
  );
}
