@props([
    'color' => 'blue',
    'text'  => '',
    'dot'   => false,
])

@php
    $colorClass = match($color) {
        'primary' => 'bg-primary-50 text-primary-700',
        'green'   => 'bg-emerald-50 text-emerald-700',
        'red'     => 'bg-red-50 text-red-700',
        'yellow'  => 'bg-amber-50 text-amber-700',
        'gray'    => 'bg-surface-100 text-surface-600',
        'purple'  => 'bg-purple-50 text-purple-700',
        'blue'    => 'bg-blue-50 text-blue-700',
        default   => 'bg-surface-100 text-surface-600',
    };
    $dotColor = match($color) {
        'primary' => 'bg-primary-500',
        'green'   => 'bg-emerald-500',
        'red'     => 'bg-red-500',
        'yellow'  => 'bg-amber-500',
        'gray'    => 'bg-surface-400',
        'purple'  => 'bg-purple-500',
        'blue'    => 'bg-blue-500',
        default   => 'bg-surface-400',
    };
@endphp

<span {{ $attributes->merge(['class' => "inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium {$colorClass}"]) }}>
    @if($dot)
        <span class="w-1.5 h-1.5 rounded-full {{ $dotColor }}"></span>
    @endif
    {{ $text ?: $slot }}
</span>