<script setup lang="ts">
type Tone = 'neutral' | 'ok' | 'warn' | 'bad' | 'info' | 'accent' | 'invert'

withDefaults(defineProps<{ tone?: Tone; dot?: boolean }>(), { tone: 'neutral', dot: false })
</script>

<template>
  <span class="badge" :data-tone="tone">
    <span v-if="dot" class="badge-dot" />
    <slot />
  </span>
</template>

<style scoped>
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  border-radius: 4px;
  border: 1px solid;
  white-space: nowrap;
}

.badge-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

.badge[data-tone='neutral'] { background: var(--surface); color: var(--text-dim); border-color: var(--border); }
.badge[data-tone='ok']      { background: rgba(31, 138, 91, 0.1);   color: var(--ok);   border-color: rgba(31, 138, 91, 0.2); }
.badge[data-tone='warn']    { background: rgba(232, 154, 31, 0.12); color: var(--warn); border-color: rgba(232, 154, 31, 0.24); }
.badge[data-tone='bad']     { background: rgba(226, 48, 48, 0.1);   color: var(--bad);  border-color: rgba(226, 48, 48, 0.22); }
.badge[data-tone='info']    { background: rgba(42, 111, 219, 0.1);  color: var(--info); border-color: rgba(42, 111, 219, 0.22); }
.badge[data-tone='accent']  { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.badge[data-tone='invert']  { background: #0A0A0A; color: #F4F3EE; border-color: #0A0A0A; }
</style>
