interface Props {
  data: {
    shipTo: string;
    orderNo: string;
    status: string;
    orderDate: string;
    shippingMethod: string;
    paymentMethod: string;
    CustomerEmail:string;
    paymentDetail: Record<string, string>;
  };
}

export default function OrderInfoBlock({ data }: Props) {
  return (
    <>
      <h2 className="text-xl font-bold mb-6 border-b pb-3">Order Information</h2>

      {/* 两列网格布局，所有行严格对齐，Payment区域不会错位 */}
      <div className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-5">
        <div className="font-medium text-gray-700">Ship To:</div>
        <div>{data.shipTo}</div>

        <div className="font-medium text-gray-700">Order Number:</div>
        <div>{data.orderNo}</div>

        <div className="font-medium text-gray-700">Status:</div>
        <div>{data.status}</div>

        <div className="font-medium text-gray-700">Order Date:</div>
        <div>{data.orderDate}</div>

        <div className="font-medium text-gray-700">Customer Email:</div>
        <div>{data.CustomerEmail}</div>
        <div className="font-medium text-gray-700">Shipping Method:</div>
        <div>{data.shippingMethod}</div>
        <div className="font-medium text-gray-700">Payment Method:</div>
        <div className="bg-pink-300 px-3 py-1 rounded w-fit">Klarna</div>
        {/* <div className="flex flex-col gap-2">
          <span className="bg-pink-300 px-3 py-1 rounded w-fit">Klarna.</span>
          <div className="space-y-1">
            {Object.entries(data.paymentDetail).map(([key, val]) => (
              <div key={key}>{key} {val}</div>
            ))}
          </div>
        </div> */}
      </div>
    </>
  );
}