'use client'

const EVENT_TYPE_CONFIG: Record<string, { label: string; color: string; bgColor: string; icon: string }> = {
  incident: {
    label: 'Vorfall',
    color: 'text-red-700',
    bgColor: 'bg-red-100',
    icon: '🚨',
  },
  update: {
    label: 'Update',
    color: 'text-blue-700',
    bgColor: 'bg-blue-100',
    icon: '🔄',
  },
  drift_alert: {
    label: 'Drift-Warnung',
    color: 'text-orange-700',
    bgColor: 'bg-orange-100',
    icon: '📉',
  },
  regulation_change: {
    label: 'Regulierungsaenderung',
    color: 'text-purple-700',
    bgColor: 'bg-purple-100',
    icon: '📜',
  },
}

const SEVERITY_CONFIG: Record<string, { label: string; color: string }> = {
  low: { label: 'Niedrig', color: 'bg-green-100 text-green-700' },
  medium: { label: 'Mittel', color: 'bg-yellow-100 text-yellow-700' },
  high: { label: 'Hoch', color: 'bg-orange-100 text-orange-700' },
  critical: { label: 'Kritisch', color: 'bg-red-100 text-red-700' },
}

const STATUS_CONFIG: Record<string, { label: string; color: string }> = {
  open: { label: 'Offen', color: 'bg-red-100 text-red-700' },
  investigating: { label: 'In Untersuchung', color: 'bg-yellow-100 text-yellow-700' },
  resolved: { label: 'Geloest', color: 'bg-green-100 text-green-700' },
  closed: { label: 'Geschlossen', color: 'bg-gray-100 text-gray-700' },
}

export { EVENT_TYPE_CONFIG }

export function EventTypeBadge({ type }: { type: string }) {
  const config = EVENT_TYPE_CONFIG[type] || EVENT_TYPE_CONFIG.incident
  return (
    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${config.bgColor} ${config.color}`}>
      {config.icon} {config.label}
    </span>
  )
}

export function SeverityBadge({ severity }: { severity: string }) {
  const config = SEVERITY_CONFIG[severity] || SEVERITY_CONFIG.low
  return (
    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${config.color}`}>
      {config.label}
    </span>
  )
}

export function StatusBadge({ status }: { status: string }) {
  const config = STATUS_CONFIG[status] || STATUS_CONFIG.open
  return (
    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${config.color}`}>
      {config.label}
    </span>
  )
}
