<script setup lang="ts">
import { Badge as ShadcnBadge } from '@/components/core/badge';
import { reactiveOmit } from '@vueuse/core';
import { type UiBadgeProps } from './types';

defineOptions({
  name: 'UiBadge',
});

const props = withDefaults(defineProps<UiBadgeProps>(), {
  asChild: false,
  disabled: false,
  variant: 'default',
  size: 'default',
});

const delegatedProps = reactiveOmit(props, 'startIcon', 'endIcon');
</script>

<template>
  <ShadcnBadge v-bind="delegatedProps">
    <component :is="props.startIcon" v-if="props.startIcon" class="size-4" />
    <slot />
    <component :is="props.endIcon" v-if="props.endIcon" class="size-4" />
  </ShadcnBadge>
</template>
