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

<template>
  <div class=" w-[196px] h-[75px] relative">
    <div class="absolute top-0 left-20 opacity-60 text-[14px]">
      {{ title }}
    </div>
    <div class="absolute top-6 left-[88px] flex justify-center items-center gap-1">
      <span class=" text-[22px]">{{ value }}</span>
      <span class="opacity-60 text-[14px]">{{ unit }}</span>
    </div>

    <div class="">
      <Iconify :icon="icon" class=" w-[32px] h-[32px] absolute top-[12px] left-[12px]" />
    </div>
    <svg
      viewBox="0 0 196 75" fill="none" class="absolute top-0 left-0 -z-[1]" 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_11033)">

        <path
          id="çŸ©å½¢"
          d="M75.5131 27.0529H188.544L173.645 57.7836H60.9809C59.8423 57.7836 59.1188 56.5649 59.6641 55.5653L75.0742 27.3134C75.1618 27.1528 75.3302 27.0529 75.5131 27.0529Z"
          fill="url(#paint0_radial_0_11033)" fill-opacity="0.2" stroke="url(#paint1_linear_0_11033)"
        />
        <path
          id="å¡«å……" fill-rule="evenodd" clip-rule="evenodd"
          d="M80.4048 24.1894C80.58 23.8681 80.9167 23.6682 81.2827 23.6682H195.112L179.728 55.399H66.7504C65.2323 55.399 64.2677 53.774 64.9946 52.4413L80.4048 24.1894Z"
          fill="url(#paint2_linear_0_11033)" fill-opacity="0.5"
        />
        <g id="å€’å½±">
          <mask
            id="mask0_0_11033" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="59" y="58" width="106"
            height="17"
          >
            <path
              id="çŸ©å½¢_2" fill-rule="evenodd" clip-rule="evenodd"
              d="M59.5352 58.2836H164.343V74.6298H59.5352V58.2836Z" fill="url(#paint3_linear_0_11033)"
            />
          </mask>
          <g mask="url(#mask0_0_11033)">
            <path
              id="å¡«å……_2" fill-rule="evenodd" clip-rule="evenodd"
              d="M76.5586 88.5317C76.7338 88.853 77.0705 89.0529 77.4365 89.0529H191.266L175.881 57.3221H62.9042C61.3861 57.3221 60.4215 58.947 61.1484 60.2798L76.5586 88.5317Z"
              fill="url(#paint4_linear_0_11033)" fill-opacity="0.5"
            />
          </g>
        </g>
        <path
          id="è¾¹æ¡†"
          d="M81.2827 24.1682H194.314L179.414 54.899H66.7504C65.6118 54.899 64.8884 53.6803 65.4336 52.6807L80.8437 24.4288C80.9313 24.2682 81.0997 24.1682 81.2827 24.1682Z"
          stroke="url(#paint5_linear_0_11033)"
        />
        <g id="ç¼–ç»„ 4">
          <g id="åº§">
            <g id="åº•éƒ¨æ¨¡ç³Š" opacity="0.87" filter="url(#filter0_f_0_11033)">
              <path
                fill-rule="evenodd" clip-rule="evenodd"
                d="M27.9334 39.7012C28.2471 39.5159 28.6367 39.5159 28.9504 39.7012L45.243 49.3224C46.5537 50.0964 46.5537 51.9927 45.243 52.7667L28.9504 62.3879C28.6367 62.5731 28.2471 62.5732 27.9334 62.3879L11.6408 52.7667C10.3301 51.9927 10.3301 50.0964 11.6408 49.3224L27.9334 39.7012Z"
                fill="url(#paint6_linear_0_11033)"
              />
            </g>
            <path
              id="æ·±å±‚" fill-rule="evenodd" clip-rule="evenodd"
              d="M28.0706 28.5854C28.3843 28.4001 28.7739 28.4001 29.0876 28.5854L53.8416 43.2032C55.1523 43.9772 55.1523 45.8735 53.8416 46.6475L29.0876 61.2654C28.7739 61.4506 28.3843 61.4506 28.0706 61.2654L3.31665 46.6475C2.00594 45.8735 2.00594 43.9772 3.31665 43.2032L28.0706 28.5854Z"
              fill="url(#paint7_linear_0_11033)" fill-opacity="0.6"
            />
            <path
              id="åŸºå±‚"
              d="M28.935 23.0745L53.689 37.6923C54.8031 38.3502 54.8031 39.9621 53.689 40.62L28.935 55.2378C28.7155 55.3675 28.4427 55.3675 28.2232 55.2378L3.4692 40.62C2.3551 39.9621 2.35509 38.3502 3.4692 37.6923L28.2232 23.0745C28.4427 22.9448 28.7155 22.9448 28.935 23.0745Z"
              fill="url(#paint8_radial_0_11033)" stroke="url(#paint9_linear_0_11033)" stroke-width="0.6"
            />
          </g>
          <g id="æ¤­åœ†å½¢" filter="url(#filter1_df_0_11033)">
            <ellipse
              cx="27.9068" cy="36.0023" rx="11.1538" ry="7.88462" fill="url(#paint10_linear_0_11033)"
              fill-opacity="0.4"
            />
          </g>

        </g>
      </g>
      <defs>
        <filter
          id="filter0_f_0_11033" x="-5.65198" y="23.2526" width="68.1877" height="55.584"
          filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
          <feGaussianBlur stdDeviation="8.15485" result="effect1_foregroundBlur_0_11033" />
        </filter>
        <filter
          id="filter1_df_0_11033" x="11.7529" y="25.3994" width="30.3076" height="27.4875"
          filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha"
          />
          <feOffset dx="-1" dy="5" />
          <feGaussianBlur stdDeviation="2" />
          <feColorMatrix type="matrix" values="0 0 0 0 0.0700061 0 0 0 0 0.128382 0 0 0 0 0.238646 0 0 0 0.5 0" />
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_11033" />
          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_11033" result="shape" />
          <feGaussianBlur stdDeviation="1.35914" result="effect2_foregroundBlur_0_11033" />
        </filter>
        <radialGradient
          id="paint0_radial_0_11033" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
          gradientTransform="translate(66.8013 53.1895) rotate(90) scale(14.2635 86.1863)"
        >
          <stop stop-color="#466C90" />
          <stop offset="1" stop-color="#183F64" stop-opacity="0.01" />
        </radialGradient>
        <linearGradient
          id="paint1_linear_0_11033" x1="106.274" y1="66.5687" x2="107.89" y2="42.6304"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="white" stop-opacity="0.08" />
          <stop offset="0.49066" stop-color="white" stop-opacity="0.3" />
          <stop offset="1" stop-color="white" stop-opacity="0.01" />
        </linearGradient>
        <linearGradient
          id="paint2_linear_0_11033" x1="37.4551" y1="6.637" x2="26.2427" y2="80.4089"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#031518" />
          <stop offset="0.404838" stop-color="#446D9C" />
          <stop offset="1" stop-color="#2E6376" stop-opacity="0.01" />
        </linearGradient>
        <linearGradient
          id="paint3_linear_0_11033" x1="77.816" y1="58.2836" x2="77.816" y2="68.9275"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#EEEEEE" />
          <stop offset="1" stop-color="#D8D8D8" stop-opacity="0.01" />
        </linearGradient>
        <linearGradient
          id="paint4_linear_0_11033" x1="33.6089" y1="106.084" x2="22.3965" y2="32.3122"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#031518" />
          <stop offset="0.404838" stop-color="#446D9C" />
          <stop offset="1" stop-color="#2E6376" stop-opacity="0.01" />
        </linearGradient>
        <linearGradient
          id="paint5_linear_0_11033" x1="199.904" y1="46.5626" x2="196.423" y2="10.3945"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="white" stop-opacity="0.01" />
          <stop offset="0.830588" stop-color="white" stop-opacity="0.3" />
          <stop offset="1" stop-color="white" stop-opacity="0.01" />
        </linearGradient>
        <linearGradient
          id="paint6_linear_0_11033" x1="19.3075" y1="55.1144" x2="12.6648" y2="73.8499"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#6AD4D1" />
          <stop offset="1" stop-color="#5E96B8" stop-opacity="0.01" />
        </linearGradient>
        <linearGradient
          id="paint7_linear_0_11033" x1="15.5249" y1="50.7417" x2="6.03154" y2="77.5172"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#1B2D4F" />
          <stop offset="1" stop-color="#1B2D4F" stop-opacity="0.01" />
        </linearGradient>
        <radialGradient
          id="paint8_radial_0_11033" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
          gradientTransform="translate(28.9127 49.7191) rotate(109.522) scale(28.4087)"
        >
          <stop stop-color="#67A4E1" />
          <stop offset="1" stop-color="#67A4E1" stop-opacity="0.01" />
        </radialGradient>
        <linearGradient
          id="paint9_linear_0_11033" x1="12.0455" y1="23.1229" x2="12.8914" y2="54.368"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#DDFFFF" stop-opacity="0.01" />
          <stop offset="1" stop-color="#DDFFFF" />
        </linearGradient>
        <linearGradient
          id="paint10_linear_0_11033" x1="16.7529" y1="28.1177" x2="16.7529" y2="43.8869"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#DDFFFF" stop-opacity="0.01" />
          <stop offset="1" stop-color="#80BAF3" />
        </linearGradient>
        <linearGradient
          id="paint11_linear_0_11033" x1="12.0304" y1="10.0516" x2="12.0304" y2="37.1307"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="white" />
          <stop offset="1" stop-color="#6AF6FA" />
        </linearGradient>
        <clipPath id="clip0_0_11033">
          <rect width="194.712" height="74.0144" fill="white" transform="translate(0.400391 0.615356)" />
        </clipPath>
      </defs>
    </svg>
  </div>
</template>
