<script setup>
import { computed } from "vue";
import {
  BADGE_BASE_CLASSES,
  DEFAULT_BADGE_ENTRY,
} from "../../constants/badgeStyles.js";

const props = defineProps({
  value: { type: [String, Number, Boolean], default: undefined },
  valueMap: { type: Object, default: () => ({}) },
  defaultEntry: { type: Object, default: () => DEFAULT_BADGE_ENTRY },
});

const entry = computed(() => {
  const key = props.value == null ? "" : String(props.value);
  const map = props.valueMap || {};
  const found = map[key];
  if (found && found.label != null) {
    return {
      label: found.label,
      icon: found.icon || null,
      class: found.class || "",
    };
  }
  const def = props.defaultEntry || DEFAULT_BADGE_ENTRY;
  return {
    label: def.label ?? "—",
    icon: def.icon || null,
    class: def.class ?? "",
  };
});
</script>

<template>
  <span :class="[BADGE_BASE_CLASSES, entry.class]">
    <i v-if="entry.icon" :class="[entry.icon, 'mr-2']" />
    {{ entry.label }}
  </span>
</template>
