@props([
    'variant' => 'default', // default, success, warning, error, info, muted
    'size' => 'md', // sm, md
    'dot' => false,
    'pulse' => false,
])

@php
    $variants = [
        'default' => 'bg-db-surface text-db-text-secondary border-db-border',
        'success' => 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
        'warning' => 'bg-amber-500/10 text-amber-400 border-amber-500/20',
        'error' => 'bg-red-500/10 text-red-400 border-red-500/20',
        'info' => 'bg-blue-500/10 text-blue-400 border-blue-500/20',
        'muted' => 'bg-zinc-500/10 text-zinc-400 border-zinc-500/20',
        'purple' => 'bg-purple-500/10 text-purple-400 border-purple-500/20',
        'cyan' => 'bg-cyan-500/10 text-cyan-400 border-cyan-500/20',
        'pink' => 'bg-pink-500/10 text-pink-400 border-pink-500/20',
    ];

    $sizes = [
        'sm' => 'px-2 py-0.5 text-[10px]',
        'md' => 'px-2.5 py-1 text-xs',
    ];

    $dotColors = [
        'default' => 'bg-db-text-muted',
        'success' => 'bg-emerald-400',
        'warning' => 'bg-amber-400',
        'error' => 'bg-red-400',
        'info' => 'bg-blue-400',
        'muted' => 'bg-zinc-500',
        'purple' => 'bg-purple-400',
        'cyan' => 'bg-cyan-400',
        'pink' => 'bg-pink-400',
    ];
@endphp

<span {{ $attributes->merge(['class' => 'inline-flex items-center gap-1.5 font-medium rounded-full border ' . ($variants[$variant] ?? $variants['default']) . ' ' . ($sizes[$size] ?? $sizes['md'])]) }}>
    @if($dot)
    <span class="w-1.5 h-1.5 rounded-full {{ $dotColors[$variant] ?? $dotColors['default'] }} {{ $pulse ? 'animate-pulse' : '' }}"></span>
    @endif
    {{ $slot }}
</span>