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

<script setup lang="ts">
type PayRelationship = 'FullyPaid' | 'Hybrid' | 'Supplemental' | 'VolunteerOrDeferred'

interface Props {
  relationship: PayRelationship
  variant?: 'solid' | 'outline' | 'soft' | 'subtle'
  size?: 'xs' | 'sm' | 'md' | 'lg'
}

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

const badgeColor = computed(() => {
  switch (props.relationship) {
    case 'FullyPaid':
      return 'green'
    case 'Hybrid':
      return 'blue'
    case 'Supplemental':
      return 'yellow'
    case 'VolunteerOrDeferred':
      return 'gray'
    default:
      return 'gray'
  }
})

const displayText = computed(() => {
  switch (props.relationship) {
    case 'FullyPaid':
      return 'Fully Paid'
    case 'Hybrid':
      return 'Hybrid'
    case 'Supplemental':
      return 'Supplemental'
    case 'VolunteerOrDeferred':
      return 'Volunteer'
    default:
      return 'Unknown'
  }
})
</script>
