import { useNavigation } from "react-router";
import { Link } from "react-router";
import { Outlet } from "react-router";

export default function Layout() {
  const navigation = useNavigation();
  const isNavigating = Boolean(navigation.location);

  return (
    <>
      <ul>
        <li>
          <Link to="/orders">Pagamentos</Link>
          <Link to="/users">Usuários</Link>
          <Link to="/enrollments">Matrículas</Link>
        </li>
      </ul>

      {isNavigating ? <>Loading...</> : <Outlet />}
    </>
  );
}