<script setup lang="ts">
const props = defineProps<{
  title: string
  value: number
  max?: number
}>()

const percent = computed(() => {
  return (props.value / (props.max ?? 100)) * 100
})
</script>

<template>
  <div class="h-[32px] flex items-center justify-between">
    <div class="w-[140px] opacity-60 truncate">
      {{ title }}
    </div>
    <div class="relative w-[333px] h-[4px]">
      <div class="absolute text-[#E4F3FF] text-[15px] -top-2 " :style="`padding-left:${percent}%`">
        <span class="pl-2">{{ value }}</span>
      </div>

      <svg
        viewBox="0 0 333 4" class="h-[4px] absolute top-0 left-0 z-10" :style="`width:${percent}%`" fill="none"
        xmlns="http://www.w3.org/2000/svg" xmlns:anim="http://www.w3.org/2000/anim" anim=""
        anim:transform-origin="50% 50%" anim:duration="1" anim:ease="ease-in-out"
      >
        <rect
          id="çŸ©å½¢" opacity="0.7" x="0.00170898" y="0.529053" width="333" height="3" rx="1.5"
          fill="url(#paint0_linear_0_10711)" stroke="url(#paint1_linear_0_10711)"
        />
        <defs>
          <linearGradient
            id="paint0_linear_0_10711" x1="164.549" y1="0.551191" x2="164.346" y2="7.98045"
            gradientUnits="userSpaceOnUse"
          >
            <stop stop-color="#A8DEFF" />
            <stop offset="1" stop-color="#284257" stop-opacity="0.5" />
          </linearGradient>
          <linearGradient
            id="paint1_linear_0_10711" x1="225.089" y1="1.99811" x2="0.00170898" y2="1.99811"
            gradientUnits="userSpaceOnUse"
          >
            <stop stop-color="white" stop-opacity="0.598517" />
            <stop offset="1" stop-color="white" stop-opacity="0.01" />
          </linearGradient>
        </defs>
      </svg>

      <svg
        viewBox="0 0 333 4" class="absolute top-0 left-0 -z-[1]" fill="none" xmlns="http://www.w3.org/2000/svg"
        xmlns:anim="http://www.w3.org/2000/anim" anim="" anim:transform-origin="50% 50%" anim:duration="1"
        anim:ease="ease-in-out"
      >
        <rect id="çŸ©å½¢" opacity="0.7" x="0.00170898" y="0.529053" width="333" height="3" rx="1.5" fill="#2D4D67" />
      </svg>
    </div>
  </div>
</template>
