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

withDefaults(defineProps<{
  label: string
  semantic: KbxStatusSemantic
  unknown?: boolean
  rawValue?: string
}>(), {
  unknown: false,
  rawValue: '',
})
</script>

<template>
  <span
    class="kbx-status"
    :data-semantic="semantic"
    :data-unknown="unknown || undefined"
    :title="unknown ? `정의되지 않은 상태값: ${rawValue || '빈 값'}` : undefined"
  >
    <span class="kbx-status__dot" aria-hidden="true" />
    <span>{{ label }}</span>
  </span>
</template>

<style scoped>
.kbx-status{--kbx-status-color:var(--kbx-color-text-muted);--kbx-status-surface:var(--kbx-color-surface);--kbx-status-border:var(--kbx-color-border);display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 8px;border:1px solid var(--kbx-status-border);border-radius:999px;background:var(--kbx-status-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)}
.kbx-status[data-semantic="ready"],.kbx-status[data-semantic="info"],.kbx-status[data-semantic="pending"],.kbx-status[data-semantic="processing"]{--kbx-status-color:var(--kbx-color-primary);--kbx-status-surface:var(--kbx-color-info-surface);--kbx-status-border:var(--kbx-color-info-border)}
.kbx-status[data-semantic="completed"]{--kbx-status-color:var(--kbx-color-success);--kbx-status-surface:var(--kbx-color-success-surface);--kbx-status-border:var(--kbx-color-success-border)}
.kbx-status[data-semantic="warning"],.kbx-status[data-semantic="hold"]{--kbx-status-color:var(--kbx-color-warning);--kbx-status-surface:var(--kbx-color-warning-surface);--kbx-status-border:var(--kbx-color-warning-border)}
.kbx-status[data-semantic="error"]{--kbx-status-color:var(--kbx-color-danger);--kbx-status-surface:var(--kbx-color-danger-surface);--kbx-status-border:var(--kbx-color-danger-border)}
.kbx-status[data-semantic="cancelled"],.kbx-status[data-semantic="disabled"]{--kbx-status-color:var(--kbx-color-text-muted);color:var(--kbx-color-text-muted);background:var(--kbx-color-surface-muted)}
.kbx-status[data-unknown="true"]{border-style:dashed;--kbx-status-color:var(--kbx-color-warning);--kbx-status-surface:var(--kbx-color-warning-surface);--kbx-status-border:var(--kbx-color-warning-border)}
</style>
