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

export function AppLayout(): JSX.Element {
  return (
    <div className="app-shell">
      <header className="app-shell__header">
        <div className="app-shell__brand">Calendar Run</div>
        <nav className="app-shell__nav" aria-label="Primary navigation">
          <NavLink
            to="/"
            end
            className={({ isActive }) =>
              isActive ? "app-shell__link app-shell__link--active" : "app-shell__link"
            }
          >
            Dashboard
          </NavLink>
          <NavLink
            to="/races"
            className={({ isActive }) =>
              isActive ? "app-shell__link app-shell__link--active" : "app-shell__link"
            }
          >
            Races
          </NavLink>
        </nav>
      </header>
      <main className="app-shell__main">
        <Outlet />
      </main>
    </div>
  );
}