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

export function AppLayout(): JSX.Element {
  return (
    <div className="app-shell">
      <header className="app-shell__header">
        <div className="app-shell__brand">Календарь стартов</div>
        <nav className="app-shell__nav" aria-label="Основная навигация">
          <NavLink
            to="/"
            end
            className={({ isActive }) =>
              isActive ? "app-shell__link app-shell__link--active" : "app-shell__link"
            }
          >
            Обзор
          </NavLink>
          <NavLink
            to="/races"
            className={({ isActive }) =>
              isActive ? "app-shell__link app-shell__link--active" : "app-shell__link"
            }
          >
            Старты
          </NavLink>
          <NavLink
            to="/races/new"
            className={({ isActive }) =>
              isActive ? "app-shell__link app-shell__link--active" : "app-shell__link"
            }
          >
            + Добавить
          </NavLink>
        </nav>
      </header>
      <main className="app-shell__main">
        <Outlet />
      </main>
      <AppShellFooter />
    </div>
  );
}