@props([
    'variant' => 'gray', // gray, primary, success, danger, warning, info
    'icon' => null,
    'dot' => true,
])

@php
    $variants = [
        'gray' => 'bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300',
        'primary' => 'bg-primary-50 dark:bg-primary-500/15 text-primary-700 dark:text-primary-300',
        'success' => 'bg-emerald-50 dark:bg-emerald-500/15 text-emerald-700 dark:text-emerald-300',
        'danger' => 'bg-rose-50 dark:bg-rose-500/15 text-rose-700 dark:text-rose-300',
        'warning' => 'bg-amber-50 dark:bg-amber-500/15 text-amber-700 dark:text-amber-300',
        'info' => 'bg-sky-50 dark:bg-sky-500/15 text-sky-700 dark:text-sky-300',
        'purple' => 'bg-purple-50 dark:bg-purple-500/15 text-purple-700 dark:text-purple-300',
    ];
    $dotColors = [
        'gray' => 'bg-slate-500', 'primary' => 'bg-primary-500', 'success' => 'bg-emerald-500',
        'danger' => 'bg-rose-500', 'warning' => 'bg-amber-500', 'info' => 'bg-sky-500',
        'purple' => 'bg-purple-500',
    ];
@endphp
<span @class([
    'inline-flex items-center gap-1.5 px-2.5 py-1 text-[11px] font-semibold rounded-full whitespace-nowrap',
    $variants[$variant] ?? $variants['gray'],
])>
    @if($dot)<span @class(['w-1.5 h-1.5 rounded-full', $dotColors[$variant] ?? $dotColors['gray']])></span>@endif
    @if($icon)<i data-lucide="{{ $icon }}" class="w-3 h-3"></i>@endif
    {{ $slot }}
</span>
