@props(['color' => 'slate'])

@php
    $colors = [
        'emerald' => 'bg-emerald-50 text-emerald-700 ring-emerald-600/15',
        'amber'   => 'bg-brand-yellow-50 text-brand-yellow-800 ring-brand-yellow-600/20',
        'rose'    => 'bg-brand-red-50 text-brand-red-700 ring-brand-red-600/15',
        'sky'     => 'bg-sky-50 text-sky-700 ring-sky-600/15',
        'slate'   => 'bg-slate-100 text-slate-700 ring-slate-500/15',
        'indigo'  => 'bg-brand-50 text-brand-700 ring-brand-600/15',
        'brand'   => 'bg-brand-50 text-brand-700 ring-brand-600/15',
        'accent'  => 'bg-accent-50 text-accent-700 ring-accent-600/15',
        'violet'  => 'bg-accent-50 text-accent-700 ring-accent-600/15',
        'fuchsia' => 'bg-fuchsia-50 text-fuchsia-700 ring-fuchsia-600/15',
        'cyan'    => 'bg-cyan-50 text-cyan-700 ring-cyan-600/15',
        'orange'  => 'bg-orange-50 text-orange-700 ring-orange-600/15',
    ];
    $class = $colors[$color] ?? $colors['slate'];
@endphp

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