@props([
    'active' => true,
    'featured' => false,
    'label' => null,
])

@php
    if ($label) {
        $text = $label;
        $classes = 'bg-slate-100 text-slate-700';
        $lower = strtolower($label);
        if (in_array($lower, ['new', 'active'])) {
            $classes = 'bg-emerald-50 text-emerald-700';
        } elseif (in_array($lower, ['closed', 'hidden'])) {
            $classes = 'bg-slate-100 text-slate-500';
        } elseif (in_array($lower, ['read', 'in progress', 'in_progress'])) {
            $classes = 'bg-sky-50 text-sky-700';
        }
    } else {
        $text = $active ? 'Active' : 'Deactive';
        $classes = $active ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-500';
    }
@endphp

<span class="inline-flex items-center gap-1.5">
    <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $classes }}">
        {{ $text }}
    </span>
    @if ($featured)
        <span class="inline-flex items-center rounded-full bg-[#C5181E]/10 px-2.5 py-0.5 text-xs font-medium text-[#C5181E]">
            Featured
        </span>
    @endif
</span>