<script setup lang="ts">
import { computed } from "vue";
import { cn } from "@/lib/utils";

type BadgeConfig = { label: string; color: string };

const props = defineProps<{
  value: unknown;
  column: {
    badges: Record<string, BadgeConfig> | null;
  };
}>();

const colorClasses: Record<string, string> = {
  gray: "bg-gray-100 text-gray-700 border-gray-200",
  green: "bg-green-100 text-green-700 border-green-200",
  red: "bg-red-100 text-red-700 border-red-200",
  yellow: "bg-yellow-100 text-yellow-700 border-yellow-200",
  blue: "bg-blue-100 text-blue-700 border-blue-200",
  purple: "bg-purple-100 text-purple-700 border-purple-200",
};

const badge = computed(() => {
  const key = String(props.value ?? "");
  return props.column.badges?.[key] ?? null;
});

const badgeClasses = computed(() => {
  if (!badge.value) return "";
  return colorClasses[badge.value.color] ?? colorClasses.gray;
});
</script>

<template>
  <span
    v-if="badge"
    :class="
      cn(
        'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold',
        badgeClasses,
      )
    "
  >
    {{ badge.label }}
  </span>
  <span v-else>{{ value ?? "—" }}</span>
</template>
