@props(['variant' => 'secondary', 'icon' => null])

@php
    $variants = [
        'success' => 'bg-green-500/10 text-green-500 border-green-500/20',
        'warning' => 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20',
        'danger' => 'bg-red-500/10 text-red-500 border-red-500/20',
        'info' => 'bg-blue-500/10 text-blue-500 border-blue-500/20',
        'secondary' => 'bg-[var(--input-bg)] text-[var(--text-secondary)] border-[var(--border-color)]',
        'primary' => 'bg-[var(--accent-green)]/10 text-[var(--accent-green)] border-[var(--accent-green)]/20',
    ];
    $classes = $variants[$variant] ?? $variants['secondary'];
@endphp

<span {{ $attributes->merge(['class' => 'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[10px] font-bold uppercase tracking-wider border ' . $classes]) }}>
    @if($icon) <i class="bi {{ $icon }}"></i> @endif
    {{ $slot }}
</span>