@props(['color' => 'slate', 'size' => 'md'])

@php
    $colors = [
        'slate'   => 'bg-slate-100 text-slate-700 ring-slate-200',
        'brand'   => 'bg-brand-50 text-brand-800 ring-brand-200',
        'gold'    => 'bg-gold-100 text-gold-800 ring-gold-200',
        'emerald' => 'bg-emerald-50 text-emerald-700 ring-emerald-200',
        'amber'   => 'bg-amber-50 text-amber-800 ring-amber-200',
        'orange'  => 'bg-orange-50 text-orange-800 ring-orange-200',
        'red'     => 'bg-red-50 text-red-700 ring-red-200',
        'sky'     => 'bg-sky-50 text-sky-700 ring-sky-200',
        'indigo'  => 'bg-indigo-50 text-indigo-700 ring-indigo-200',
    ];

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

<span {{ $attributes->class([
    'inline-flex items-center gap-1.5 rounded-full font-medium ring-1 ring-inset',
    $colors[$color] ?? $colors['slate'],
    $sizes[$size] ?? $sizes['md'],
]) }}>{{ $slot }}</span>
