<script setup lang="ts">
const props = defineProps<{
  tone?: "neutral" | "brand" | "success" | "warn" | "danger" | "info";
  label: string;
  subtle?: boolean;
}>();
</script>

<template>
  <span class="badge" :class="[props.tone ?? 'neutral', { subtle: props.subtle }]">
    {{ props.label }}
  </span>
</template>

<style scoped>
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--geo-color-border);
  background: rgba(255, 255, 255, 0.42);
  color: var(--geo-color-text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.subtle {
  background: transparent;
}

.brand {
  color: var(--geo-color-brand-strong);
  background: var(--geo-color-brand-soft);
  border-color: rgba(15, 118, 110, 0.24);
}

.success {
  color: var(--geo-color-success);
  background: var(--geo-color-success-soft);
  border-color: rgba(21, 128, 61, 0.22);
}

.warn {
  color: var(--geo-color-warn);
  background: var(--geo-color-warn-soft);
  border-color: rgba(180, 83, 9, 0.22);
}

.danger {
  color: var(--geo-color-danger);
  background: var(--geo-color-danger-soft);
  border-color: rgba(185, 28, 28, 0.22);
}

.info {
  color: var(--geo-color-info);
  background: var(--geo-color-info-soft);
  border-color: rgba(37, 99, 235, 0.22);
}

html[data-theme="dark"] .badge {
  background: rgba(255, 255, 255, 0.04);
}
</style>
