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

function AppLayout({ onLogout, username }) {
  return (
    <div className="min-h-screen bg-slate-100">
      <header className="bg-white shadow-sm">
        <div className="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-3 px-4 py-4">
          <Link to="/" className="text-lg font-bold text-blue-900">
            EPMS Admin
          </Link>
          <div className="text-sm text-slate-600">Logged in as: {username}</div>
        </div>

        <nav className="mx-auto flex max-w-6xl flex-wrap gap-2 px-4 pb-4">
          <div>
          <NavLink to="/employee" className="rounded-md px-3 py-2 text-sm font-medium text-blue-900 hover:bg-blue-100">
            Employees
          </NavLink>
          <NavLink to="/department" className="rounded-md px-3 py-2 text-sm font-medium text-blue-900 hover:bg-blue-100">
            Departments
          </NavLink>
          <NavLink to="/salary" className="rounded-md px-3 py-2 text-sm font-medium text-blue-900 hover:bg-blue-100">
            Salaries
          </NavLink>
          <NavLink to="/reports" className="rounded-md px-3 py-2 text-sm font-medium text-blue-900 hover:bg-blue-100">
            Reports
          </NavLink>
          </div>
          <button
            type="button"
            onClick={onLogout}
            className="ml-auto rounded-md bg-red-600 px-3 py-2 text-sm font-medium text-white hover:bg-red-700"
          >
            Logout
          </button>
          

        </nav>
      </header>

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

export default AppLayout;

