import { getOrderById } from "@/app/components/order/getOrderById";
import { notFound } from "next/navigation";
import BillingDetails from "@/app/components/order/billingDetails";
import ShippingDetails from "@/app/components/order/shippingDetails";
import PaymentDetails from "@/app/components/order/paymentDetails";
import CardDetails from "@/app/components/order/CardDetails";
import ItemsDetails from "@/app/components/order/OrderItems";
import PromoDetails from "@/app/components/order/PromoDetails";

export default async function OrderDetailsPage({
  params,
}: {
  params: Promise<{ orderId: string }>; // params is a Promise here
}) {
  const resolvedParams = await params; // await params first
  const order = await getOrderById(resolvedParams.orderId);
  if (!order) return notFound();

  return (
    <div className="mob-noise py-10 relative">
      <h1>Order Details</h1>
      <ItemsDetails items={order.items} />
      <BillingDetails billing={order.billing} />
      <ShippingDetails shipping={order.shipping} />
      <PaymentDetails payment={order.payment} />
      <CardDetails card={order.card} />
      <PromoDetails promo={order.promo} />
      <p>
        <strong>Total:</strong> ${order.total}
      </p>
    </div>
  );
}