<script setup>
import { computed } from 'vue'

const props = defineProps({
  acuity: {
    type: Object,
    required: true,
  },
})

const segments = computed(() => {
  const total = props.acuity.low + props.acuity.medium + props.acuity.high
  if (total === 0) {
    return [
      { key: 'empty', label: 'No patients', pct: 100, className: 'bg-gray-200 dark:bg-gray-700' },
    ]
  }

  return [
  { key: 'low', label: 'Low', count: props.acuity.low, pct: (props.acuity.low / total) * 100, className: 'bg-green-500' },
  { key: 'medium', label: 'Medium', count: props.acuity.medium, pct: (props.acuity.medium / total) * 100, className: 'bg-amber-500' },
  { key: 'high', label: 'High', count: props.acuity.high, pct: (props.acuity.high / total) * 100, className: 'bg-red-500' },
  ].filter(segment => segment.count > 0)
})
</script>

<template>
  <div>
    <div class="flex h-2 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
      <div
        v-for="segment in segments"
        :key="segment.key"
        class="h-full transition-all"
        :class="segment.className"
        :style="{ width: `${segment.pct}%` }"
        :title="segment.label"
      />
    </div>
    <div class="mt-2 flex flex-wrap gap-3 text-xs text-gray-500 dark:text-gray-400">
      <span v-for="segment in segments" :key="`${segment.key}-legend`">
        <span class="mr-1 inline-block h-2 w-2 rounded-full" :class="segment.className" />
        {{ segment.label }}: {{ segment.count ?? 0 }}
      </span>
    </div>
  </div>
</template>
