import { useLang } from '../i18n/LanguageContext'
import type { ModuleStatus } from '../lib/api'
import type { TranslationKey } from '../i18n/translations'

const STYLES: Record<ModuleStatus | 'operational' | 'critical', string> = {
  online: 'bg-arka-online/15 text-arka-online border-arka-online/30',
  operational: 'bg-arka-online/15 text-arka-online border-arka-online/30',
  degraded: 'bg-arka-degraded/15 text-arka-degraded border-arka-degraded/30',
  offline: 'bg-arka-offline/15 text-arka-offline border-arka-offline/30',
  critical: 'bg-arka-offline/15 text-arka-offline border-arka-offline/30',
  not_installed: 'bg-arka-surface-2 text-arka-muted border-arka-border',
}

const DOT: Record<string, string> = {
  online: 'bg-arka-online',
  operational: 'bg-arka-online',
  degraded: 'bg-arka-degraded',
  offline: 'bg-arka-offline',
  critical: 'bg-arka-offline',
  not_installed: 'bg-arka-muted',
}

export function StatusBadge({
  status,
}: {
  status: ModuleStatus | 'operational' | 'critical'
}) {
  const { t } = useLang()
  const key = `status.${status}` as TranslationKey
  return (
    <span
      className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium ${STYLES[status]}`}
    >
      <span className={`h-1.5 w-1.5 rounded-full ${DOT[status]}`} />
      {t(key)}
    </span>
  )
}
