<template>
  <span :class="['badge', `badge-${variant}`]">
    <slot>{{ text }}</slot>
  </span>
</template>

<script setup>
defineProps({
  text: String,
  variant: {
    type: String,
    default: 'default'
    // default, critical, error, warn, success, info
  }
})
</script>

<style scoped>
.badge {
  display: inline-block;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
}

.badge-default {
  background: #e9ecef;
  color: #495057;
}

.badge-critical {
  background: #e74c3c;
  color: white;
}

.badge-error {
  background: #e74c3c;
  color: white;
}

.badge-warn {
  background: #f39c12;
  color: white;
}

.badge-success {
  background: #27ae60;
  color: white;
}

.badge-info {
  background: #3498db;
  color: white;
}
</style>
