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

@php
$colorClasses = [
    'gray' => 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-100',
    'blue' => 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100',
    'green' => 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100',
    'yellow' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100',
    'red' => 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100',
    'purple' => 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-100',
    'indigo' => 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-100',
];
$classes = $colorClasses[$color] ?? $colorClasses['gray'];
@endphp

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