<template>
  <UBadge
    :color="badgeColor"
    :variant="variant"
    :size="size"
  >
    <UIcon v-if="showIcon" :name="iconName" class="mr-1" />
    {{ displayText }}
  </UBadge>
</template>

<script setup lang="ts">
type ConcentrationStatus = 'green' | 'yellow' | 'red'

interface Props {
  status: ConcentrationStatus
  topSourcePct?: number
  variant?: 'solid' | 'outline' | 'soft' | 'subtle'
  size?: 'xs' | 'sm' | 'md' | 'lg'
  showIcon?: boolean
  showPercentage?: boolean
}

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

const badgeColor = computed(() => {
  return props.status
})

const displayText = computed(() => {
  const statusTexts = {
    green: 'Low Risk',
    yellow: 'Medium Risk', 
    red: 'High Risk'
  }
  
  const baseText = statusTexts[props.status]
  
  if (props.showPercentage && props.topSourcePct) {
    return `${baseText} (${Math.round(props.topSourcePct)}%)`
  }
  
  return baseText
})

const iconName = computed(() => {
  switch (props.status) {
    case 'green':
      return 'i-heroicons-check-circle'
    case 'yellow':
      return 'i-heroicons-exclamation-triangle'
    case 'red':
      return 'i-heroicons-x-circle'
    default:
      return 'i-heroicons-question-mark-circle'
  }
})
</script>
