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

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

<template>
  <Tag class="ks-status-tag" :severity="severity ?? 'info'">
    <span v-if="iconLabel" aria-hidden="true">{{ iconLabel }}</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>
