<script setup lang="ts">
withDefaults(
  defineProps<{
    progress: any
  }>(),
  {
    progress: 0,
  },
)

defineOptions({ name: 'NewProgressBar' })
</script>

<template>
  <div class="new-progress-bar">
    <div class="bg"></div>
    <div
      class="progress"
      :style="{
        width: progress + '%',
      }"
    ></div>
    <div class="text">{{ progress }}%</div>
  </div>
</template>

<style lang="scss" scoped>
$h: 3vh;
$w: 340px;
.new-progress-bar {
  position: relative;
  padding: 0.17vh 0;
  width: $w;
  height: $h;

  .bg {
    width: 100%;
    height: 100%;
    background-color: #e8f1f8;
    border-radius: 2.17vh;
    box-shadow: inset 0 0 0.33vh 0 rgba(0, 0, 0, 0.25);
  }
  .progress {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: $h;
    background: linear-gradient(180deg, #a2fb6e 0%, #4de798 100%);
    border-radius: 2.17vh;
    z-index: 1;
    transition: width 0.25s linear;
    box-shadow: 0 0.33vh 0.33vh 0 rgba(0, 0, 0, 0.15);
  }
  .text {
    position: absolute;
    top: 0;
    right: 20px;
    font-family: $font-text;
    color: #505758;
    font-size: 1.83vh;
    height: $h;
    line-height: $h;
    z-index: 2;
  }
}
</style>
