<template>
  <span v-if="config" class="status-tag" :style="{ backgroundColor: config.color, color: config.textColor }">
    {{ t(config.label) }}
  </span>
  <span v-else>-</span>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { getDocumentStatusConfig } from '@/enums/documentStatus';

interface Props {
  status: number;
}

const props = defineProps<Props>();
const { t } = useI18n();

const config = computed(() => getDocumentStatusConfig(props.status));
</script>

<style scoped>
.status-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 18px;
  border-radius: 4px;
  white-space: nowrap;
}
</style>
