import type { OrderDetail } from "@orderops/shared";

interface OrderSummaryProps {
  order: OrderDetail;
}

export function OrderSummaryPanel({ order }: OrderSummaryProps) {
  return (
    <section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h2 className="text-lg font-semibold text-slate-900">{order.orderNumber}</h2>
          <p className="text-sm text-slate-600">{order.customer.name} · {order.customer.email}</p>
        </div>
        <span className="rounded-full bg-slate-100 px-3 py-1 text-sm font-medium text-slate-700">{order.status}</span>
      </div>
    </section>
  );
}