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

<template>
  <div class="w-[110px] h-[66px] relative">
    <div class="space-y-3 ">
      <div class="flex items-end gap-3">
        <Iconify :icon="icon" class="w-[38px] h-[38px] shrink-0 " />
        <div class="text-[24px] text-shadow">
          {{ value }}
        </div>
      </div>

      <div class="text-[14px]">
        {{ title }}
      </div>
    </div>
    <svg viewBox="0 0 96 66" class="absolute top-0 left-0 w-full h-full " 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="ç¼–ç»„ 12" clip-path="url(#clip0_0_10738)">
        <g id="icon_bar" opacity="0.5">
          <path id="ç›´çº¿ 20" d="M0.646341 44.0854H88.5488" stroke="white" stroke-linecap="square" />
          <circle id="æ¤­åœ†å½¢" cx="92.4268" cy="44.0853" r="2.73171" stroke="white" />
        </g>
      </g>
      <defs>
        <linearGradient id="paint0_linear_0_10738" x1="4.02103" y1="0.0608013" x2="4.02103" y2="31.9686" gradientUnits="userSpaceOnUse">
          <stop stop-color="white" />
          <stop offset="1" stop-color="#6AF6FA" />
        </linearGradient>
        <clipPath id="clip0_0_10738">
          <rect width="95.6585" height="66" fill="white" />
        </clipPath>
      </defs>
    </svg>
  </div>
</template>

<style scoped>
.text-shadow{
  text-shadow: 0px 1px 6px #84F8FB;
}
</style>
