<script lang="ts">
    export let text: string;
    export let color: 'red' | 'orange' | 'green' | 'gray';

    // Function to select classes based on the color
    const colorClasses = (color: string): string => {
        switch(color) {
            case 'red':
                return 'bg-red-600 text-red-50';
            case 'orange':
                return 'bg-orange-600 text-orange-50';
            case 'green':
                return 'bg-green-600 text-green-50';
            case 'gray':
                return 'bg-gray-600 text-gray-50';
            default:
                return '';
        }
    };

    // Current classes for the badge
    $: badgeClasses = `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs whitespace-nowrap font-medium capitalize ${colorClasses(color)}`;
</script>

<span class={badgeClasses}>
  {text}
</span>
