@props(['color' => 'gray'])
@php
    $colors = [
        'gray' => 'bg-black/5 text-ink/60 ring-1 ring-black/5',
        'green' => 'bg-success/10 text-success ring-1 ring-success/15',
        'red' => 'bg-danger/10 text-danger ring-1 ring-danger/15',
        'amber' => 'bg-warning/10 text-warning ring-1 ring-warning/15',
        'blue' => 'bg-blue-500/10 text-blue-700 ring-1 ring-blue-500/15',
        'indigo' => 'bg-indigo-500/10 text-indigo-700 ring-1 ring-indigo-500/15',
        'violet' => 'bg-violet-500/10 text-violet-700 ring-1 ring-violet-500/15',
        'gold' => 'bg-champagne/15 text-champagne-light ring-1 ring-champagne/20',
    ];
@endphp

<span {{ $attributes->merge(['class' => 'inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold tracking-wide transition-colors duration-200 '.($colors[$color] ?? $colors['gray'])]) }}>
    {{ $slot }}
</span>
