import { useLoaderData } from "react-router";
import { apiGet, type ApiResult } from "../lib/api";

export async function statusLoader(): Promise<ApiResult[]> {
  return Promise.all([apiGet("/"), apiGet("/readyz")]);
}

export function Status() {
  const results = useLoaderData<typeof statusLoader>();
  return (
    <section>
      <h1>Backend status</h1>
      {results.map((r) => (
        <article key={r.path}>
          <h2>
            GET {r.path} &rarr; {r.status}
          </h2>
          <pre>{JSON.stringify(r.body, null, 2)}</pre>
        </article>
      ))}
    </section>
  );
}