mimic/frontend/src/components/SimulationStatusBadge.tsx

import type { SimulationStatus } from '@/api/types';

const LABELS: Record<SimulationStatus, string> = {
  pending: 'Pending',
  in_progress: 'In progress',
  review_required: 'Review required',
  done: 'Done',
};

// Fixed colors — badge backgrounds are decorative/semantic, not themeable.
// text-white is hardcoded (not text-canvas) so dark mode doesn't invert it to near-black.
const STYLES: Record<SimulationStatus, string> = {
  pending: 'bg-fog text-charcoal border border-hairline',
  in_progress: 'bg-primary-soft text-primary-deep',
  review_required: 'bg-bloom-coral text-white',
  done: 'bg-storm-deep text-white',
};

export function SimulationStatusBadge({ status }: { status: SimulationStatus }): JSX.Element {
  return (
    <span
      className={`inline-flex items-center rounded-lg px-3 py-[6px] text-[14px] leading-[1.3] font-medium ${STYLES[status]}`}
      data-testid="simulation-status-badge"
      data-status={status}
    >
      {LABELS[status]}
    </span>
  );
}