<template>
  <span class="badge" :class="cls">{{ label }}</span>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({ label: String })
const cls = computed(() => {
  const l = (props.label || '').toLowerCase()
  if (l.includes('primary strength')) return 'strength'
  if (l.includes('critical weakness')) return 'weakness'
  if (l.includes('inconsistent')) return 'inconsistent'
  return 'default'
})
</script>
<style scoped>
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.strength     { background: #dcfce7; color: #15803d; }
.weakness     { background: #fee2e2; color: #b91c1c; }
.inconsistent { background: #fff7ed; color: #c2410c; }
.default      { background: #f3f4f6; color: #555; }
</style>
