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

<script setup lang="ts">
type Restriction = "Restricted" | "General";

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

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

const badgeColor = computed(() => {
  switch (props.restriction) {
    case "Restricted":
      return "orange";
    case "General":
      return "green";
    default:
      return "neutral";
  }
});

const displayText = computed(() => {
  return props.restriction;
});
</script>
