import { NavLink, Outlet } from "react-router-dom";

function SidebarLayout({ onLogout, username }) {
  const linkClass = ({ isActive }) =>
    `flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition ${
      isActive ? "bg-blue-600 text-white shadow-sm" : "text-slate-700 hover:bg-slate-100"
    }`;

  return (

    <div className="min-h-screen bg-slate-100">
      <div className="flex min-h-screen">
        <aside className="w-64 hidden border-r bg-white p-4 md:block">
          <div className="mb-6">
            <div className="text-lg font-bold text-blue-900">
              PayMaster Ltd
            </div>
            <div className="mt-1 text-xs text-slate-500">
              Logged in as: {username}
            </div>
          </div>

          <nav className="space-y-1">
            <NavLink to="/dashboard" end className={linkClass}>
              Dashboard
            </NavLink>
            <NavLink to="/employee" className={linkClass}>
              Employees
            </NavLink>
            <NavLink to="/department" className={linkClass}>
              Departments
            </NavLink>
            <NavLink to="/salary" className={linkClass}>
              Salaries
            </NavLink>
            <NavLink to="/reports" className={linkClass}>
              Reports
            </NavLink>
          </nav>

          <div className="mt-6">
            <button
              type="button"
              onClick={onLogout}
              className="w-full rounded-lg bg-red-600 px-3 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-red-700"
            >
              Logout
            </button>
          </div>
        </aside>

        <main className="flex-1">
          <header className="bg-white shadow-sm">
            <div className="mx-auto flex max-w-6xl items-center justify-between gap-3 px-4 py-4">
              <div className="text-lg font-bold text-blue-900 md:hidden">EPMS Admin</div>
              <div className="text-sm text-slate-600">{username}</div>
            </div>
          </header>

          <div className="mx-auto max-w-6xl p-4">
            <Outlet />
          </div>
        </main>
      </div>
    </div>
  );
}

export default SidebarLayout;

