import React from "react";
import { NavLink } from "react-router-dom";

var menuItems = [
  { path: "/", label: "Dashboard" },
  { path: "/suppliers", label: "Supplier" },
  { path: "/shipments", label: "Shipment" },
  { path: "/deliveries", label: "Delivery" },
  { path: "/reports", label: "Reports" },
  { path: "/logout", label: "Logout" },
];

function Sidebar(props) {
  function linkClass(linkProps) {
    return "block rounded-md px-4 py-3 text-sm font-semibold " +
      (linkProps.isActive ? "bg-slate-50 text-blue-900" : "text-slate-50 hover:bg-blue-800");
  }

  return (
    <aside className="no-print bg-blue-900 p-4 text-slate-50 md:min-h-screen md:w-64">
      <div className="mb-6 border-b border-blue-800 pb-4">
        <h1 className="text-xl font-bold">SCMS</h1>
        <p className="mt-1 text-sm text-slate-100">SupplyNet Ltd</p>
        <p className="mt-3 text-xs text-slate-100">User: {props.user ? props.user.username : ""}</p>
      </div>

      <nav className="grid gap-2">
        {menuItems.map(function (item) {
          return (
          <NavLink key={item.path} to={item.path} end={item.path === "/"} className={linkClass}>
            {item.label}
          </NavLink>
          );
        })}
      </nav>
    </aside>
  );
}

export default Sidebar;
