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 />}
    </>
  )
}