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

<template>
  <div class="w-[257px] h-[89px] relative">
    <div class="flex w-full h-full">
      <div class="flex justify-center items-center w-[82px] h-full">
        <Iconify :icon="icon" class="w-[50px] h-[50px]" />
      </div>
      <div class="flex flex-col items-start pl-[20px] justify-center flex-1 w-full h-full">
        <div class="text-[#00F8F4] text-[34px] inline-block align-baseline">
          {{ value }}
        </div>
        <div class="text-[#A5D8FC] text-[16px] -mt-3 pl-1">
          {{ title }}
        </div>
      </div>
    </div>
    <svg viewBox="0 0 257 89" 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="box1">
        <g id="å¡«å……">
          <g filter="url(#filter0_i_0_11197)">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H257V88H0V0Z" fill="#263343" fill-opacity="0.5" />
          </g>
          <path d="M0.5 0.5H256.5V87.5H0.5V0.5Z" stroke="#9DA3AF" stroke-opacity="0.5" />
        </g>
        <g id="å¡«å……_2" opacity="0.2">
          <rect width="82" height="88" fill="#577B95" fill-opacity="0.75" />
          <rect width="82" height="88" fill="url(#paint0_linear_0_11197)" />
        </g>
        <g id="é«˜å…‰" opacity="0.45">
          <rect width="82" height="88" fill="url(#paint1_radial_0_11197)" />
          <rect width="82" height="88" fill="url(#paint2_radial_0_11197)" />
        </g>
        <g id="ç¼–ç»„ 92">
          <path id="è·¯å¾„ 43" opacity="0.663407" fill-rule="evenodd" clip-rule="evenodd" d="M0 64.2831V88.2831H26L0 64.2831Z" fill="#253645" />
          <path id="è·¯å¾„ 48" opacity="0.0416248" fill-rule="evenodd" clip-rule="evenodd" d="M15 85.2831L35.5479 64.2831L38 85.2831H15Z" fill="#FEFFFF" />
          <path id="è·¯å¾„ 49" opacity="0.0482428" fill-rule="evenodd" clip-rule="evenodd" d="M29 87.2831L52 75.2831L48.029 87.2831H29Z" fill="#FEFFFF" />
          <path id="è·¯å¾„ 58" opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M78.1507 58.2831L68 86.2831L82 72.2831L78.1507 58.2831Z" fill="#FEFFFF" />
          <path id="è·¯å¾„ 59" opacity="0.135917" fill-rule="evenodd" clip-rule="evenodd" d="M59.1277 73.2831L57 87.2831H74L59.1277 73.2831Z" fill="#FEFFFF" />
        </g>
        <rect id="è¾¹æ¡†" opacity="0.66428" x="0.75" y="0.75" width="80.5" height="86.5" stroke="url(#paint3_linear_0_11197)" stroke-width="1.5" />

        <rect id="çŸ©å½¢" width="4" height="4" fill="#FFF9FF" />
        <rect id="çŸ©å½¢_2" y="84" width="4" height="4" fill="#FFF9FF" />
        <rect id="çŸ©å½¢_3" x="253" width="4" height="4" fill="#FFF9FF" />
        <rect id="çŸ©å½¢_4" x="253" y="84" width="4" height="4" fill="#FFF9FF" />

      </g>
      <defs>
        <filter id="filter0_i_0_11197" x="0" y="0" width="257" height="88" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
          <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 />
          <feGaussianBlur stdDeviation="2.5" />
          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
          <feColorMatrix type="matrix" values="0 0 0 0 0.577123 0 0 0 0 0.766759 0 0 0 0 0.884641 0 0 0 0.3 0" />
          <feBlend mode="normal" in2="shape" result="effect1_innerShadow_0_11197" />
        </filter>
        <filter id="filter1_d_0_11197" x="14" y="24" width="52" height="50.0909" 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 dy="2" />
          <feGaussianBlur stdDeviation="1" />
          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" />
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_11197" />
          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_11197" result="shape" />
        </filter>
        <linearGradient id="paint0_linear_0_11197" x1="0" y1="0" x2="0" y2="88" gradientUnits="userSpaceOnUse">
          <stop stop-color="#467591" />
          <stop offset="1" stop-color="#84C3D5" />
        </linearGradient>
        <radialGradient id="paint1_radial_0_11197" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(41 -16.5514) rotate(90) scale(79.4466 95.9972)">
          <stop stop-color="#1D3B53" />
          <stop offset="0.179646" stop-color="#1E3D55" stop-opacity="0.910177" />
          <stop offset="1" stop-color="#416C89" stop-opacity="0.5" />
        </radialGradient>
        <radialGradient id="paint2_radial_0_11197" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(76.0746 82.7784) rotate(90) scale(79.4466 74.0297)">
          <stop stop-color="#ACDDE4" />
          <stop offset="1" stop-color="#305877" stop-opacity="0.01" />
        </radialGradient>
        <linearGradient id="paint3_linear_0_11197" x1="-39.4221" y1="47.3867" x2="48.1169" y2="125.818" gradientUnits="userSpaceOnUse">
          <stop stop-color="#FEFFFF" />
          <stop offset="0.986769" stop-color="#FEFFFF" stop-opacity="0.01" />
        </linearGradient>
        <linearGradient id="paint4_linear_0_11197" x1="16.3103" y1="24.0877" x2="16.3103" y2="69.5826" gradientUnits="userSpaceOnUse">
          <stop stop-color="white" />
          <stop offset="1" stop-color="#9FC3C4" />
        </linearGradient>
        <clipPath id="clip0_0_11197">
          <rect width="81" height="62" fill="white" transform="translate(103 12)" />
        </clipPath>
      </defs>
    </svg>
  </div>
</template>
