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

export type StatusCountKey = "fail" | "success" | "unknown";
export type StatusCount = Record<StatusCountKey, number>;

const props = defineProps<{
  statusCount?: StatusCount;
}>();

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

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