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

const props = defineProps<{ allCount: number; inProgressCount: number }>();

const progress = computed(() => {
  if (props.allCount === 0) {
    return 0;
  }

  return (props.inProgressCount / props.allCount) * 100;
});
</script>

<template>
  <div>
    <span class="relative inline-block h-2 w-full bg-white">
      <div
        v-if="progress > 0"
        class="absolute h-full bg-green-500"
        :style="{ width: `${progress}%` }"
      ></div>
    </span>
    <p>
      {{
        $t("learningPathPage.progressText", {
          inProgressCount: props.inProgressCount,
          allCount: props.allCount,
        })
      }}
    </p>
  </div>
</template>
