@props([
    'color' => 'gray',
    'size' => 'sm',
])

@php
    $colors = [
        'gray' => 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
        'red' => 'bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-400',
        'green' => 'bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-400',
        'blue' => 'bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-400',
        'yellow' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-400',
        'indigo' => 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/50 dark:text-indigo-400',
        'purple' => 'bg-purple-100 text-purple-800 dark:bg-purple-900/50 dark:text-purple-400',
        'pink' => 'bg-pink-100 text-pink-800 dark:bg-pink-900/50 dark:text-pink-400',
        'orange' => 'bg-orange-100 text-orange-800 dark:bg-orange-900/50 dark:text-orange-400',
    ];

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

<span {{ $attributes->merge(['class' => 'inline-flex items-center font-medium rounded-full ' . ($colors[$color] ?? $colors['gray']) . ' ' . ($sizes[$size] ?? $sizes['sm'])]) }}>
    {{ $slot }}
</span>