<script setup lang="ts">
defineProps<{
  title: string
  value: number
}>()
</script>

<template>
  <div class="h-[77px] relative w-[140px]">
    <div class="w-full text-center text-[#E4F3FF] text-[14px] scale-95 opacity-70">
      {{ title }}
    </div>
    <div class="bottom-0 h-[50px] flex justify-center items-center w-full absolute text-[24px] text-[#00F8F4]">
      {{ value }}
    </div>
    <svg
      class="absolute bottom-0" viewBox="0 0 140 75" 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"
    >
      <g id="1" clip-path="url(#clip0_0_11080)">
        <path
          id="BG" opacity="0.39908" fill-rule="evenodd" clip-rule="evenodd"
          d="M3 33.1563L9.02438 25H129.615L137.242 33.1563L137.36 66L129.615 74.3253L9.02438 74.0097L3 66L3 33.1563Z"
          fill="url(#paint0_radial_0_11080)"
        />
        <path id="è·¯å¾„ 41" opacity="0.245359" d="M6.91697 70.52H133.553" stroke="white" stroke-width="0.6" />
        <path
          id="è·¯å¾„ 31" opacity="0.4" d="M3.23047 32.6844L9.25485 24.6747H129.846L137.591 32.6844"
          stroke="white"
        />
        <path
          id="è·¯å¾„ 31_2" opacity="0.4" d="M3.23047 65.6747L9.25485 73.6844H129.846L137.591 65.6747"
          stroke="white"
        />
        <rect id="çŸ©å½¢" y="48" width="4.94438" height="2.7" rx="1" fill="#2EF9CB" />
        <rect id="çŸ©å½¢_2" x="135" y="48" width="4.94438" height="2.7" rx="1" fill="#2EF9CB" />

        <g id="å››è¾¹">
          <path id="è·¯å¾„ 32" d="M3.23047 32.831L9.25485 24.6747H15.5446" stroke="#BFE2FB" />
          <path id="è·¯å¾„ 32_2" d="M136.544 32.831L130.52 24.6747H124.23" stroke="#BFE2FB" />
          <path id="è·¯å¾„ 32_3" d="M3.23047 65.6747L9.25485 73.831H15.5446" stroke="#BFE2FB" />
          <path id="è·¯å¾„ 32_4" d="M136.544 65.6747L130.52 73.831H124.23" stroke="#BFE2FB" />
        </g>
      </g>
      <defs>
        <radialGradient
          id="paint0_radial_0_11080" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
          gradientTransform="translate(66.7454 74.3253) rotate(91.4485) scale(67.9372 416.887)"
        >
          <stop stop-color="#67A4E1" />
          <stop offset="1" stop-color="#67A4E1" stop-opacity="0.01" />
        </radialGradient>
        <clipPath id="clip0_0_11080">
          <rect width="139.944" height="74.6747" fill="white" />
        </clipPath>
      </defs>
    </svg>
  </div>
</template>
