<template>
  <UBadge :color="badgeColor" :variant="variant" :size="size">
    {{ displayText }}
  </UBadge>
</template>

<script setup lang="ts">
type RiskBand = "Low" | "Medium" | "High";

interface Props {
  risk: RiskBand;
  variant?: "solid" | "outline" | "soft" | "subtle";
  size?: "xs" | "sm" | "md" | "lg";
}

const props = withDefaults(defineProps<Props>(), {
  variant: "subtle",
  size: "sm",
});

const badgeColor = computed(() => {
  switch (props.risk) {
    case "Low":
      return "green";
    case "Medium":
      return "yellow";
    case "High":
      return "red";
    default:
      return "neutral";
  }
});

const displayText = computed(() => {
  return `${props.risk} Risk`;
});
</script>
