<script setup lang="ts">
import { computed } from "vue";

const props = defineProps<{
  statusCount?: {
    fail: number;
    success: number;
    unknown: number;
  };
}>();

const total = computed(() => {
  return (
    (props.statusCount?.fail || 0) +
    (props.statusCount?.success || 0) +
    (props.statusCount?.unknown || 0)
  );
});

const done = computed(() => {
  if (total.value === 0) {
    return 0;
  }

  return ((props.statusCount?.success || 0) / total.value) * 100;
});

const notDone = computed(() => {
  if (total.value === 0) {
    return 0;
  }

  return ((props.statusCount?.fail || 0) / total.value) * 100 + done.value;
});
</script>

<template>
  <span class="relative w-full h-2 bg-gray-300 inline-block">
    <span
      v-if="notDone !== done"
      class="absolute bg-orange-500 h-full"
      :style="{ width: `${notDone}%` }"
    ></span>
    <span
      v-if="done > 0"
      class="absolute bg-green-500 h-full"
      :style="{ width: `${done}%` }"
    ></span>
  </span>
</template>

<style lang="scss" scoped></style>
