<script setup>
/**
 * Reusable status badge with the same style as activity log event badges.
 * Use in B2CDataTable slots or anywhere you need label + Tailwind class from a valueMap.
 *
 * Props:
 *   value - raw cell value (e.g. 'created', true, 'active')
 *   valueMap - { [value]: { label: string, class: string } }, e.g. EVENT_BADGES or custom
 *   defaultEntry - { label, class } for unknown values (optional)
 */
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>
