<template>
  <span
    class="px-1.5 py-0.5 rounded text-xs font-semibold uppercase tracking-wider"
    :class="colorClass"
  >{{ severity }}</span>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{ severity: string | null }>()

const colorClass = computed(() => {
  switch ((props.severity ?? '').toUpperCase()) {
    case 'DEBUG':    return 'bg-gray-800 text-sev-debug'
    case 'INFO':     return 'bg-blue-900/40 text-sev-info'
    case 'WARN':     return 'bg-yellow-900/40 text-sev-warn'
    case 'WARNING':  return 'bg-yellow-900/40 text-sev-warn'
    case 'ERROR':    return 'bg-red-900/40 text-sev-error'
    case 'CRITICAL': return 'bg-red-900/60 text-sev-critical font-bold'
    default:         return 'bg-surface-raised text-text-dim'
  }
})
</script>
