<script setup>
import { usePage } from '@inertiajs/vue3'
import { computed } from 'vue'

const props = defineProps({
    statut: { type: String, required: true },
    size: { type: String, default: 'md' },
})

const page = usePage()

const label = computed(() => page.props.config?.statuts?.[props.statut] ?? props.statut)

const colorClasses = {
    brouillon:             'bg-gray-100 text-gray-700',
    en_attente_validation: 'bg-yellow-100 text-yellow-700',
    validee:               'bg-blue-100 text-blue-700',
    commandee:             'bg-indigo-100 text-indigo-700',
    partiellement_recue:   'bg-orange-100 text-orange-700',
    recue_complete:        'bg-green-100 text-green-700',
    cloturee:              'bg-slate-100 text-slate-600',
    annulee:               'bg-red-100 text-red-700',
}

const sizeClasses = {
    sm: 'px-2 py-0.5 text-xs',
    md: 'px-2.5 py-1 text-xs',
    lg: 'px-3 py-1.5 text-sm',
}

const classes = computed(() => [
    'inline-flex items-center rounded-full font-medium whitespace-nowrap',
    colorClasses[props.statut] ?? 'bg-gray-100 text-gray-700',
    sizeClasses[props.size] ?? sizeClasses.md,
])
</script>

<template>
    <span :class="classes">{{ label }}</span>
</template>
