<template>
    <span
        class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold"
        :class="classes"
    >
        {{ $t(`clientTicket.status.${status}`) }}
    </span>
</template>

<script setup lang="ts">
import type { ClientTicketStatus } from '~/modules/client-portal/services/dto/client-ticket'

const props = defineProps<{
    status: ClientTicketStatus
}>()

const STATUS_CONFIG: Record<ClientTicketStatus, string> = {
    new: 'bg-sky-100 text-sky-700',
    in_progress: 'bg-amber-100 text-amber-700',
    done: 'bg-green-100 text-green-700',
    rejected: 'bg-neutral-200 text-neutral-600',
}

const classes = computed(() => STATUS_CONFIG[props.status] ?? STATUS_CONFIG.new)
</script>
