import { ORDER_STATUS_LABEL } from "../../lib/customerAuth";

// Colors are a rough "how good is this news" scale — neutral while
// in-progress, success once actually delivered, warm/red for anything
// that means the order didn't complete as planned. Reuses existing tokens
// where they exist (--color-brand, --color-success/-subtle); cancelled/
// return_requested borrow plain Tailwind red/orange since this codebase
// has no custom tokens for those (same reasoning as the existing
// text-red-600 error-text convention elsewhere).
const STYLES: Record<string, string> = {
  received: "bg-bg-muted text-text-muted",
  processing: "bg-brand/10 text-brand",
  shipped: "bg-brand/10 text-brand",
  delivered: "bg-success-subtle text-success",
  cancelled: "bg-red-50 text-red-600",
  return_requested: "bg-orange-50 text-orange-600",
  returned: "bg-bg-muted text-text-light",
};

export function OrderStatusBadge({ status }: { status: string }) {
  return (
    <span
      className={`self-start inline-flex items-center px-2.5 py-1 rounded-full text-label font-bold whitespace-nowrap ${STYLES[status] ?? "bg-bg-muted text-text-muted"}`}
    >
      {ORDER_STATUS_LABEL[status] ?? status}
    </span>
  );
}
