<template>
    <div
    class="rounded-[0.781vw] bg-[#F8F8F8] pinkShadow p-[4vw] md:p-[1.3vw] space-y-[6vw] md:space-y-[2.45vw] thin"
  >
    <div class="flex justify-between">
      <h2
        class="text-[3.59vw] gap-[2vw] md:gap-[0.5vw] md:text-[1.055vw] font-semibold flex items-center"
      >
        وضعیت دوره
        <svg
          class="h-[4.359vw] md:h-[1.25vw] w-[4.359vw] md:w-[1.25vw]"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M11.02 19.5H7.5C6.88 19.5 6.33 19.48 5.84 19.41C3.21 19.12 2.5 17.88 2.5 14.5V9.5C2.5 6.12 3.21 4.88 5.84 4.59C6.33 4.52 6.88 4.5 7.5 4.5H10.96"
            stroke="#0D3F40"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M15.02 4.5H16.5C17.12 4.5 17.67 4.52 18.16 4.59C20.79 4.88 21.5 6.12 21.5 9.5V14.5C21.5 17.88 20.79 19.12 18.16 19.41C17.67 19.48 17.12 19.5 16.5 19.5H15.02"
            stroke="#0D3F40"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M15 2V22"
            stroke="#0D3F40"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M8 8.5V15.5"
            stroke="#0D3F40"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </h2>
      <span v-if="props.props.completionPercentage > 99" class="text-[2.836vw] md:text-[0.741vw] text-[#878787]"
        >تکمیل شده</span
      >
      <span v-else-if="props.props.completionPercentage > 1 && props.props.completionPercentage < 99" class="text-[2.836vw] md:text-[0.741vw] text-[#878787]"
        >در حال تکمیل</span
      >
      <span v-else class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">در حال تولید</span>
    </div>
    <div>
      <div class="flex justify-between text-[3.19vw] md:text-[0.833vw]">
        <span class="text-[#383E43]">درصد تکمیل دوره</span>
        <span>{{props.props.completionPercentage}}٪</span>
      </div>
      <div
        id="progressbar"
        class="mt-[3vw] md:mt-[0.7vw] h-[2.051vw] md:h-[0.521vw] rounded-[2vw] md:rounded-[0.521vw]"
      >
        <div

         :style="{ width: activeClass + '%' }"
          class="rounded-[2vw] md:rounded-[0.521vw] h-[2.051vw] md:h-[0.521vw]"
        >
      <!-- {{props.props.completionPercentage}} -->
      </div>
      </div>
    </div>
  </div>

</template>
<script setup>
const adad = 2;
const props = defineProps(['props'])
const activeClass = ref(props.props.completionPercentage);

</script>
<style scoped>
#progressbar {
    background-color: #e5e5e5;
  
    width: 100%;
  }
  #progressbar > div {
    background-color: #0d3f40;
    float: left;
    left: 0;
  }
</style>