<script setup lang="ts">
import type IVBadge from './IVBadge.type';
import Tag from 'primevue/tag';
import { computed } from 'vue';

const props = withDefaults(defineProps<IVBadge>(), {
  type: undefined,
  noIcon: false,
  small: false,
})

const severity = computed(() => {
    switch (props.type) {
        case 'error': return 'danger';
        case 'warning' : return 'warn';
        case 'success' : return 'success';
        case 'info': return 'info';
        case 'new': return 'secondary';
        default:
            return undefined;
    }
});

const icon = computed(() => {
  switch (props.type) {
    case 'error': return 'ri-close-circle-fill';
    case 'warning' : return 'ri-alert-fill';
    case 'success' : return 'ri-checkbox-circle-fill';
    case 'info': return 'ri-information-fill';
    case 'new': return 'ri-flashlight-fill';
    default:
      return undefined;
    }
})
</script>

<template>
  <Tag
    role="alert"
    :value="props.label"
    :severity="severity"
    class="p-tag"
    :style="(!!props.maxWidth) ? {width: props.maxWidth} : {width: 'fit-content'}"
    :class="{'small': props.small}"
  >
    <template v-if="!props.noIcon || props.type === undefined">
      <i :class="icon"></i>
    </template>
  </Tag>
</template>

<style lang="css" scoped>
.p-tag.small{
  --p-tag-icon-size: var( --text-body-SM-detail-text-Maj-size);
  --p-tag-font-size: var( --text-body-XS-mention-text-Maj-size);
  --p-tag-font-weight: var( --text-body-XS-mention-text-Maj-weight);
  --p-tag-padding: 0.125rem 0.325rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

