<script setup>
import { computed } from 'vue';

const props = defineProps({
    status: {
        type: String,
        required: true,
    },
});

const config = computed(() => {
    switch (props.status) {
        case 'draft':
            return {
                label: 'Brouillon',
                classes: 'bg-slate-100 text-slate-800 border-slate-200 dark:bg-slate-900/50 dark:text-slate-300 dark:border-slate-800',
            };
        case 'validated':
            return {
                label: 'Validée',
                classes: 'bg-sky-100 text-sky-800 border-sky-200 dark:bg-sky-950/50 dark:text-sky-300 dark:border-sky-900',
            };
        case 'ordered':
            return {
                label: 'Commandée',
                classes: 'bg-amber-100 text-amber-800 border-amber-200 dark:bg-amber-950/50 dark:text-amber-300 dark:border-amber-900',
            };
        case 'delivered':
            return {
                label: 'Livrée',
                classes: 'bg-emerald-100 text-emerald-800 border-emerald-200 dark:bg-emerald-950/50 dark:text-emerald-300 dark:border-emerald-900',
            };
        case 'closed':
            return {
                label: 'Clôturée',
                classes: 'bg-purple-100 text-purple-800 border-purple-200 dark:bg-purple-950/50 dark:text-purple-300 dark:border-purple-900',
            };
        default:
            return {
                label: props.status,
                classes: 'bg-gray-100 text-gray-800 border-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-750',
            };
    }
});
</script>

<template>
    <span
        :class="`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold border ${config.classes}`"
    >
        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-current"></span>
        {{ config.label }}
    </span>
</template>
