@props(['status', 'label' => null])

@php
    [$classes, $dot, $texto] = match ($status) {
        'verde' => ['bg-emerald-50 text-emerald-700 ring-emerald-200', 'bg-emerald-500', 'A tiempo'],
        'amarillo' => ['bg-amber-50 text-amber-700 ring-amber-200', 'bg-amber-500', 'Por vencer'],
        'rojo' => ['bg-rose-50 text-rose-700 ring-rose-200', 'bg-rose-500', 'Vencida'],
        default => ['bg-gray-100 text-gray-500 ring-gray-200', 'bg-gray-400', 'Completada'],
    };
@endphp

<span {{ $attributes->merge(['class' => "inline-flex items-center gap-1.5 whitespace-nowrap rounded-full px-2.5 py-0.5 text-xs font-medium ring-1 ring-inset {$classes}"]) }}>
    <span class="h-1.5 w-1.5 rounded-full {{ $dot }}"></span>
    {{ $label ?? $texto }}
</span>