<!-- Badge component -->
<script setup lang="ts">
// Props with defaults
const { type = 'default', size = 'normal' } = defineProps<{
    type?: 'default' | 'warning' | 'success';
    size?: 'normal' | 'large';
}>();
</script>

<template>
    <div :class="`badge badge-${type} badge-${size} `">
        <slot></slot>
    </div>
</template>

<style lang="scss" scoped>
.badge {
    @apply inline-flex items-center gap-2 text-xs leading-xs;

    &.badge-normal {
        @apply px-1.5;
    }

    &.badge-large {
        @apply px-3 py-1.5;
    }

    &.badge-default {
        @apply bg-neutral-200 hover:bg-neutral-400 text-base-500 rounded-lg transition-colors;
    }

    &.badge-warning {
        @apply bg-warning-500 text-base-500 rounded-full;
    }

    &.badge-success {
        @apply bg-success-500 text-white rounded-full;
    }
}
</style>
