<script setup lang="ts">
import type { StatusEdital } from '~/types'
import { STATUS_EDITAL_CONFIG } from '~/types'

const props = defineProps<{ status: StatusEdital }>()
const config = computed(() => STATUS_EDITAL_CONFIG[props.status])
</script>

<template>
  <span class="chip" :style="{ background: config.bg, color: config.color }">
    {{ config.label }}
  </span>
</template>

<style scoped>
.chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
</style>
