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

<template>
  <div class="w-[326px] h-[20px] flex justify-center items-center relative">
    <div class="text-[14px]">
      {{ title }}
    </div>
    <svg
      viewBox="0 0 326 20" 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="å°æ ‡é¢˜" clip-path="url(#clip0_0_11069)">
        <path
          id="å¡«å……" fill-rule="evenodd" clip-rule="evenodd"
          d="M100.591 0H225.85L234 14.803L229.974 20H96.9235L92 14.5531L100.591 0Z"
          fill="url(#paint0_radial_0_11069)"
        />

        <g id="è¾¹æ¡†">
          <path
            d="M92.6175 14.4906L100.876 0.5H225.555L233.404 14.7565L229.729 19.5H97.1455L92.6175 14.4906Z"
            stroke="url(#paint1_linear_0_11069)"
          />
          <path
            d="M92.6175 14.4906L100.876 0.5H225.555L233.404 14.7565L229.729 19.5H97.1455L92.6175 14.4906Z"
            stroke="url(#paint2_radial_0_11069)"
          />
          <path
            d="M92.6175 14.4906L100.876 0.5H225.555L233.404 14.7565L229.729 19.5H97.1455L92.6175 14.4906Z"
            stroke="url(#paint3_radial_0_11069)"
          />
        </g>
        <g id="ç¼–ç»„ 65">
          <path id="è·¯å¾„ 33" d="M233.316 14.6773H325.195" stroke="url(#paint4_linear_0_11069)" />
          <path
            id="è·¯å¾„ 34" d="M231.755 20L234.387 17H248.755" stroke="url(#paint5_radial_0_11069)"
            stroke-width="0.6"
          />
        </g>
        <g id="ç¼–ç»„ 65_2">
          <path id="è·¯å¾„ 33_2" d="M93.1951 14.6773H1.31561" stroke="url(#paint6_linear_0_11069)" />
          <path
            id="è·¯å¾„ 34_2" d="M94.7554 20L92.1242 17H77.7554" stroke="url(#paint7_radial_0_11069)"
            stroke-width="0.6"
          />
        </g>
      </g>
      <defs>
        <radialGradient
          id="paint0_radial_0_11069" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
          gradientTransform="translate(163 13.8769) rotate(90) scale(20 419.717)"
        >
          <stop stop-color="#1AB4D7" stop-opacity="0.6" />
          <stop offset="1" stop-color="#27363D" />
        </radialGradient>
        <linearGradient
          id="paint1_linear_0_11069" x1="105.681" y1="26.4717" x2="174.232" y2="-44.13"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#A8E7EB" />
          <stop offset="0.231689" stop-color="#A1D9E0" stop-opacity="0.2" />
          <stop offset="0.500249" stop-color="#99C9D4" stop-opacity="0.01" />
          <stop offset="0.790929" stop-color="#A2DAE1" stop-opacity="0.2" />
          <stop offset="1" stop-color="#A8E7EB" />
        </linearGradient>
        <radialGradient
          id="paint2_radial_0_11069" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
          gradientTransform="translate(226.099 1.74818) rotate(90) scale(14.1018 100.123)"
        >
          <stop stop-color="#A8E7EB" />
          <stop offset="1" stop-color="white" stop-opacity="0.01" />
        </radialGradient>
        <radialGradient
          id="paint3_radial_0_11069" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
          gradientTransform="translate(100.241 1.19016) rotate(90) scale(15.3031 108.652)"
        >
          <stop stop-color="#A8E7EB" />
          <stop offset="1" stop-color="white" stop-opacity="0.01" />
        </radialGradient>
        <linearGradient
          id="paint4_linear_0_11069" x1="210.873" y1="15.995" x2="211.083" y2="20.9072"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#A8E7EB" />
          <stop offset="1" stop-color="#A8E7EB" stop-opacity="0.01" />
        </linearGradient>
        <radialGradient
          id="paint5_radial_0_11069" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
          gradientTransform="translate(234.502 17) rotate(90) scale(3 64.4003)"
        >
          <stop stop-color="#A8E7EB" />
          <stop offset="1" stop-color="white" stop-opacity="0.01" />
        </radialGradient>
        <linearGradient
          id="paint6_linear_0_11069" x1="115.638" y1="15.995" x2="115.427" y2="20.9072"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#A8E7EB" />
          <stop offset="1" stop-color="#A8E7EB" stop-opacity="0.01" />
        </linearGradient>
        <radialGradient
          id="paint7_radial_0_11069" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
          gradientTransform="translate(92.0086 17) rotate(90) scale(3 64.4003)"
        >
          <stop stop-color="#A8E7EB" />
          <stop offset="1" stop-color="white" stop-opacity="0.01" />
        </radialGradient>
        <clipPath id="clip0_0_11069">
          <rect width="326" height="20" fill="white" />
        </clipPath>
      </defs>
    </svg>
  </div>
</template>
