// Copyright: © 2026 TWWIM UG. All rights reserved. (www.twwim.com)

import { useTranslation } from '@/i18n/TranslationProvider';
import type { ConversationStatus } from '../lib/types';

const COLORS: Record<ConversationStatus, string> = {
  active: 'bg-emerald-100 text-emerald-700 ring-emerald-200',
  idle: 'bg-amber-100 text-amber-700 ring-amber-200',
  intercepted: 'bg-violet-100 text-violet-700 ring-violet-200',
  closed: 'bg-gray-100 text-gray-600 ring-gray-200',
};

export function StatusBadge({ status }: { status: ConversationStatus }) {
  const { t } = useTranslation();
  return (
    <span
      className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ring-1 ring-inset ${COLORS[status]}`}
      data-testid={`status-badge-${status}`}
    >
      {t(`conversations.status.${status}`)}
    </span>
  );
}