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

@php
$colors = [
    'gray' => 'bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-300',
    'red' => 'bg-red-200 dark:bg-red-900/50 text-red-800 dark:text-red-300 border border-red-500 dark:border-red-800',
    'blue' => 'bg-blue-200 dark:bg-blue-900/50 text-blue-800 dark:text-blue-300 border border-blue-500 dark:border-blue-800',
    'green' => 'bg-green-200 dark:bg-green-900/50 text-green-800 dark:text-green-300 border border-green-500 dark:border-green-800',
    'yellow' => 'bg-yellow-200 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-300 border border-yellow-500 dark:border-yellow-800',
    'neon' => 'bg-lime-200 dark:bg-[#ccff00]/10 text-lime-800 dark:text-[#ccff00] border border-lime-700 dark:border-[#ccff00]/50',
];
$classes = $colors[$color] ?? $colors['gray'];
@endphp

<span class="{{ $classes }} text-xs font-medium me-2 px-2.5 py-0.5 rounded border">
    {{ $slot }}
</span>