<script lang="ts" setup>
defineProps(['progress']);
</script>

<template>
  <div class="circular-progress">
    <svg v-if="progress" viewBox="0 0 100 100">
      <g transform="rotate(-90, 50, 50)">
        <circle
          opacity=".08"
          r="45"
          cx="50"
          cy="50"
          fill="transparent"
          stroke="black"
          stroke-linecap="round"
        ></circle>
        <circle
          r="45"
          cx="50"
          cy="50"
          fill="transparent"
          stroke="currentColor"
          stroke-linecap="round"
          :stroke-dashoffset="283 - (progress * 283) / 100"
          stroke-dasharray="283"
        ></circle>
      </g>
    </svg>

    <div class="percent">{{ progress }}%</div>
  </div>
</template>

<style lang="scss" scoped>
.circular-progress {
  --size: 4em;
  --stroke-width: 8;

  display: inline-block;
  width: var(--size);
  height: var(--size);
  position: relative;
  .percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    white-space: nowrap;
    line-height: 1;
    color: var(--text-color);
  }

  svg {
    width: var(--size);
    height: var(--size);
    stroke-width: var(--stroke-width);

    circle {
      transition: stroke-dashoffset 0.2s ease-in-out;
    }
  }
}
</style>
