import type { ReactNode } from 'react';
import { Badge, type BadgeProps } from '@mantine/core';
import { STATUS_TONE_COLOR, type StatusTone } from '@ema-platform/shared';

export interface StatusBadgeProps extends Omit<BadgeProps, 'color' | 'children'> {
  /** The platform tone this status maps onto. */
  tone: StatusTone;
  /** Human label. Already translated by the caller. */
  label: ReactNode;
}

/**
 * One badge for every status in the platform.
 *
 * There were 29 files rendering `<Badge variant="light" color={MAP[status]}>`,
 * each re-deciding size, variant and radius alongside the colour — which is why
 * a "pending" badge in one queue did not match "pending" in the next. Callers
 * now supply a tone and a label; how a status *looks* is decided once, here.
 *
 * Tone rather than colour on purpose: `STATUS_TONE_COLOR` is the single place a
 * tone becomes a Mantine colour, so restyling the platform's idea of "danger"
 * stays one edit rather than a sweep.
 */
export function StatusBadge({ tone, label, ...props }: StatusBadgeProps) {
  return (
    <Badge variant="light" size="sm" radius="sm" {...props} color={STATUS_TONE_COLOR[tone]}>
      {label}
    </Badge>
  );
}
