@props(['status'])

@php
[$bg, $text, $dot] = match($status) {
    'En cours'   => ['bg-emerald-50 ring-emerald-200/60',   'text-emerald-700', 'bg-emerald-500'],
    'En attente' => ['bg-amber-50 ring-amber-200/60',       'text-amber-700',   'bg-amber-400'],
    'Terminé'    => ['bg-slate-100 ring-slate-200/60',      'text-slate-500',   'bg-slate-400'],
    'Annulé'     => ['bg-rose-50 ring-rose-200/60',         'text-rose-600',    'bg-rose-400'],
    default      => ['bg-gray-100 ring-gray-200/60',        'text-gray-500',    'bg-gray-400'],
};
@endphp

<span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-semibold ring-1 ring-inset {{ $bg }} {{ $text }}">
    <span class="h-1.5 w-1.5 rounded-full {{ $dot }} shrink-0"></span>
    {{ $status }}
</span>