@props(['variant' => 'default'])

@php
    $classes = [
        'default' => 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300',
        'success' => 'bg-accent-100 text-accent-700 dark:bg-accent-900/40 dark:text-accent-300',
        'warning' => 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
        'primary' => 'bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300',
    ][$variant] ?? 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300';
@endphp

<span {{ $attributes->merge(['class' => "inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold {$classes}"]) }}>
    {{ $slot }}
</span>