interface StatusPillProps {
  label: string;
  /** Hex color from the API, e.g. "#F7BC58". */
  color?: string | null;
}

/**
 * Renders an order status using the hex color the backend supplies, so the UI
 * stays in sync with server-defined statuses without a hardcoded color map.
 */
export function StatusPill({ label, color }: StatusPillProps) {
  const hex = color ?? "#94A3B8";
  return (
    <span
      className="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium"
      style={{ backgroundColor: `${hex}1A`, color: hex }}
    >
      {label}
    </span>
  );
}