import { transporterApi, type TransporterVehicleOption } from "@/lib/api/transporter";
import { requireServerToken } from "@/lib/auth/server";
import VehiclePicker from "./VehiclePicker";

async function loadVehicles(token: string): Promise<TransporterVehicleOption[]> {
  try {
    return (await transporterApi.vehicles(token)).data;
  } catch {
    return [];
  }
}

/**
 * Server-rendered: the token comes from the cookie during SSR, so the vehicle
 * list is fetched before the response is sent and the `Loader` branch disappears
 * entirely — there is nothing left to wait for once the HTML arrives.
 *
 * Only the picker below is a Client Component, because toggling a card has to
 * repaint its ring without a round trip. Saving is a Server Action, so the
 * selection no longer travels through a hand-rolled `fetch`.
 */
export default async function TransporterVehiclesPage() {
  const token = await requireServerToken("/transporter/vehicles");
  const list = await loadVehicles(token);

  return <VehiclePicker items={list} />;
}