import { Suspense } from "react";
import { getOrderById } from "@/lib/actions/orders";
import type { Order } from "../types";
import { OrderDetailsPage } from "./order-details-page";
import { OrderDetailsPageSkeleton } from "./order-details-skeleton";

export const dynamic = "force-dynamic";

export default function OrderDetailsRoute({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  return (
    <Suspense fallback={<OrderDetailsPageSkeleton />}>
      <OrderDetailsLoader orderId={params.then((p) => p.id)} />
    </Suspense>
  );
}

async function OrderDetailsLoader({
  orderId,
}: {
  orderId: Promise<string>;
}) {
  const id = await orderId;
  const order: Order | null = await getOrderById(id);
  return <OrderDetailsPage order={order} />;
}