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

const LABELS: Record<EngagementStatus, string> = {
  planned: 'Planned',
  active: 'Active',
  closed: 'Closed',
};

const STYLES: Record<EngagementStatus, string> = {
  // Outlined ink for planned (neutral), filled primary for active (engagement live),
  // outlined steel for closed (muted). Stays within DESIGN.md palette.
  planned: 'bg-canvas text-ink border border-ink',
  active: 'bg-primary text-ink-on',
  closed: 'bg-cloud text-graphite border border-hairline',
};

export function StatusBadge({ status }: { status: EngagementStatus }): 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="status-badge"
      data-status={status}
    >
      {LABELS[status]}
    </span>
  );
}