<!--
    Component: Badge
    Small status indicator with color variants and size options
-->
<script lang="ts">
interface Props {
    /**
     * Color variant of the badge
     * @default default
     */
    variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
    /**
     * Size of the badge
     * @default md
     */
    size?: 'sm' | 'md';
}

const { variant = 'default', size = 'md' }: Props = $props();

const baseClasses = 'inline-flex items-center justify-center rounded-full font-medium';

const variantClasses = $derived(
    variant === 'success'
        ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
        : variant === 'warning'
        ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400'
        : variant === 'error'
        ? 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
        : variant === 'info'
        ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400'
        : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
);

const sizeClasses = $derived(size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-0.5 text-sm');
</script>

<span class="{baseClasses} {variantClasses} {sizeClasses}">
    <slot />
</span>
