<template>
  <div
    v-if="visible"
    class="content-upload-progress"
    :class="{
      'content-upload-progress--done': completed,
      'content-upload-progress--failed': failed,
    }"
    role="status"
    aria-live="polite"
  >
    <div class="content-upload-progress__head">
      <strong>{{ status }}</strong>
      <span>{{ detail }}</span>
    </div>
    <q-linear-progress
      rounded
      size="8px"
      :value="value"
      :color="progressColor"
      track-color="transparent"
    />
  </div>
</template>

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

const props = defineProps<{
  visible: boolean;
  failed: boolean;
  completed: boolean;
  value: number;
  status: string;
  detail: string;
}>();

const progressColor = computed(() => {
  if (props.failed) {
    return "negative";
  }
  if (props.completed) {
    return "positive";
  }
  return "secondary";
});
</script>