<script lang="ts">
  import { Badge } from '$lib/components/ui/badge'

  let { value, kind = 'default' }: { value: unknown; kind?: 'risk' | 'severity' | 'execution' | 'state' | 'type' | 'default' } = $props()

  const v = $derived(String(value ?? ''))

  const variantMap: Record<string, Record<string, 'default' | 'secondary' | 'destructive' | 'outline'>> = {
    risk: {
      destructive: 'destructive',
      config_mutation: 'secondary',
      default: 'default',
    },
    severity: {
      critical: 'destructive',
      warning: 'secondary',
      info: 'default',
      default: 'default',
    },
    execution: {
      failed: 'destructive',
      denied: 'destructive',
      revoked: 'destructive',
      cancelled: 'destructive',
      completed: 'default',
      running: 'secondary',
      approved: 'secondary',
      default: 'outline',
    },
    state: {
      active: 'default',
      healthy: 'default',
      default: 'outline',
    },
    type: {
      runbook: 'secondary',
      investigation: 'default',
      default: 'outline',
    },
    default: { default: 'default' },
  }

  const variant = $derived.by(() => {
    const map = variantMap[kind] ?? variantMap.default
    return (map[v] ?? map.default) as 'default' | 'secondary' | 'destructive' | 'outline'
  })
</script>

<Badge {variant}>{v}</Badge>
