@props([
    'variant' => 'surface',
    'dot'     => false,
    'size'    => 'md',
])

@php
    $dotColor = match ($variant) {
        'success' => 'bg-green-500',
        'warning' => 'bg-amber-500',
        'danger' => 'bg-red-500',
        'primary' => 'bg-primary-500',
        default => 'bg-muted-foreground',
    };
    $sizeClass = $size === 'sm' ? 'text-[10px] px-1.5 py-0.5' : '';
    $variantTone = match ($variant) {
        'primary' => 'bg-primary-100 text-primary-700 dark:bg-primary-950 dark:text-primary-300',
        'success' => 'bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-300',
        'warning' => 'bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300',
        'danger' => 'bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-300',
        default => 'bg-muted text-muted-foreground',
    };
    $base = 'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium';
    $classes = trim("$base $variantTone $sizeClass");
@endphp

<span {{ $attributes->merge(['class' => $classes]) }}>
    @if($dot)
        <span class="h-1.5 w-1.5 rounded-full {{ $dotColor }}"></span>
    @endif
    {{ $slot }}
</span>