<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 === 'low') return 'low'
  if (l === 'medium') return 'medium'
  if (l === 'high') return 'high'
  return 'medium'
})
</script>
<style scoped>
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.low    { background: #dcfce7; color: #15803d; }
.medium { background: #fef9c3; color: #a16207; }
.high   { background: #fee2e2; color: #b91c1c; }
</style>
