<template>
  <div class="ProgressBar">
    <q-circular-progress
      :value="progress"
      class="q-ma-md"
      color="white"
      show-value
      size="80px"
    >
      {{ progress }}%
    </q-circular-progress>
    <template v-if="this.$slots.default">
      <div class="ProgressBar-Description">
        <slot />
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import { QCircularProgress } from 'quasar';
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({
  components: {
    QCircularProgress,
  },
})
export default class ProgressBar extends Vue {
  @Prop({ default: () => 0 })
  readonly progress: number;

  @Prop({ default: () => false })
  readonly isFullScreen: boolean;
}
</script>

<style lang="scss" scoped>
.ProgressBar {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;

  &-Description {
    margin: 40px 20px 0;
  }
}
</style>
