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

export function AppLayout(): JSX.Element {
  const { user, logout } = useAuth();

  return (
    <div className="app-shell">
      <header className="app-shell__header">
        <Link className="app-shell__brand" to="/">
          Календарь стартов
        </Link>
        <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>
          {user ? (
            <button className="app-shell__link app-shell__link--button" type="button" onClick={() => void logout()}>
              Выйти
            </button>
          ) : (
            <NavLink
              to="/login"
              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>
  );
}