<script setup lang="ts">
import type { KbxStatusSemantic } from '@kbx/contracts'

defineProps<{
  label: string
  semantic: KbxStatusSemantic
}>()
</script>

<template>
  <span class="kbx-status" :data-semantic="semantic">
    <span class="kbx-status__dot" aria-hidden="true" />
    {{ label }}
  </span>
</template>

<style scoped>
.kbx-status { display:inline-flex; align-items:center; gap:6px; min-height:24px; padding:0 8px; border:1px solid var(--kbx-color-border); border-radius:999px; background:var(--kbx-color-surface); font-size:12px; font-weight:600; white-space:nowrap; }
.kbx-status__dot { width:6px; height:6px; border-radius:50%; background:var(--kbx-status-color, var(--kbx-color-text-muted)); }
.kbx-status[data-semantic="completed"] { --kbx-status-color:var(--kbx-color-success); }
.kbx-status[data-semantic="processing"], .kbx-status[data-semantic="pending"] { --kbx-status-color:var(--kbx-color-primary); }
.kbx-status[data-semantic="warning"], .kbx-status[data-semantic="hold"] { --kbx-status-color:var(--kbx-color-warning); }
.kbx-status[data-semantic="error"] { --kbx-status-color:var(--kbx-color-danger); }
.kbx-status[data-semantic="cancelled"], .kbx-status[data-semantic="disabled"] { --kbx-status-color:var(--kbx-color-text-muted); color:var(--kbx-color-text-muted); }
</style>
