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

@php
$colorMap = [
    'amber' => 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400',
    'blue' => 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
    'teal' => 'bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-400',
    'green' => 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
    'red' => 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
    'gray' => 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300',
];
$classes = $colorMap[$color] ?? $colorMap['gray'];
@endphp

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