// @design-system: domain/support/SLABadge

/**
 * SLABadge — shows whether a ticket's SLA is healthy, warning, or breached.
 *
 * tone:
 *   - healthy   → success (within SLA)
 *   - warning   → warning (nearing breach)
 *   - breached  → danger  (past SLA deadline)
 *
 * @example
 * <SLABadge tone="warning" />
 */

import { Badge } from '@/components/ui/primitives/Badge';
import { Icon } from '@/components/ui/icons/Icon';
import { useT } from '@/lib/i18n/react';
import { cn } from '@/lib/cn';

export type SLATone = 'healthy' | 'warning' | 'breached';

export interface SLABadgeProps {
  tone: SLATone;
  className?: string;
}

const TONE_MAP: Record<SLATone, 'success' | 'warning' | 'danger'> = {
  healthy: 'success',
  warning: 'warning',
  breached: 'danger',
};

export function SLABadge({ tone, className }: SLABadgeProps) {
  const t = useT('support');
  const tkt = t('ticket') as unknown as {
    sla_healthy: string;
    sla_warning: string;
    sla_breached: string;
  };

  const badgeTone = TONE_MAP[tone];
  const label =
    tone === 'healthy' ? tkt.sla_healthy : tone === 'warning' ? tkt.sla_warning : tkt.sla_breached;

  return (
    <Badge tone={badgeTone} size="sm" className={cn('gap-1', className)}>
      <Icon name="Clock" size="xs" color="inherit" aria-hidden />
      {label}
    </Badge>
  );
}