<template>
  <div :class="[cn.b(), cn.m(type)]">
    <slot name="prefix">
      <Component
        :is="resolveComponent(`ui-icon-${icon}`)"
        v-if="icon"
      />
    </slot>

    <slot> {{ text }}</slot>

    <slot name="suffix" />
  </div>
</template>

<script setup lang="ts">
import type { BadgeType } from './types'
import type { UiIcon } from '#build/types/ui/icons'

export interface Props {
  type?: BadgeType
  text?: string
  icon?: UiIcon
}

defineOptions({
  name: 'UiBadge',
})

const props = withDefaults(defineProps<Props>(), {
  type: 'neutral',
})

const cn = useClassname('ui-badge')
</script>

<style lang="scss">
@use 'styles';
</style>
