<script setup lang="ts">
import Tag from 'primevue/tag'
import type { UiSeverity } from '../contracts'
import type { UiGridStatusSemantic } from '../../gridStatus'

defineProps<{ value: string; severity?: UiSeverity; iconLabel?: string; semantic?: UiGridStatusSemantic; unknown?: boolean }>()
</script>

<template>
  <Tag class="ks-status-tag" :severity="severity ?? 'info'" :data-semantic="semantic" :data-unknown="unknown || undefined" :aria-label="unknown ? `정의되지 않음: ${value}` : value">
    <span aria-hidden="true">{{ iconLabel ?? (unknown ? '?' : '●') }}</span>
    <span>{{ value }}</span>
  </Tag>
</template>

<style scoped>
.ks-status-tag { display: inline-flex; align-items: center; gap: var(--ks-space-1); border-radius: 999px; padding: var(--ks-space-1) var(--ks-space-2); border: 1px solid currentColor; font-size: var(--ks-font-caption); line-height: var(--ks-line-caption); }
</style>
