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

<template>
  <div class="w-[120px] h-[36px] relative">
    <div class="w-full h-full  flex justify-end items-center text-[16px] " :class="{ 'text-[#84F8FB] text-shadow': active }">
      {{ title }}
    </div>
    <svg viewBox="0 0 167 36" class="w-[167px] h-[36px] absolute top-0 left-0 -z-[1]" 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="tab1-é€‰ä¸­" clip-path="url(#clip0_0_10814)">
        <path id="çŸ©å½¢" d="M0.75 0.75H164.262C164.2 0.805322 164.138 0.862241 164.073 0.920728C163.027 1.87182 161.564 3.23859 159.894 4.90396C156.558 8.23048 152.377 12.7665 149.04 17.5722C145.64 22.4671 142.977 27.093 141.187 30.4431C139.637 33.3446 136.662 35.25 133.416 35.25H0.75V0.75Z" stroke="url(#paint0_linear_0_10814)" stroke-width="1.5" />

      </g>
      <defs>
        <filter id="filter0_f_0_10814" x="40.1269" y="17.1269" width="102.746" height="24.7463" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
          <feGaussianBlur stdDeviation="5.43656" result="effect1_foregroundBlur_0_10814" />
        </filter>
        <linearGradient id="paint0_linear_0_10814" x1="53.0209" y1="23.8018" x2="53.0936" y2="36.1763" gradientUnits="userSpaceOnUse">
          <stop stop-color="#7194A8" stop-opacity="0.01" />
          <stop offset="1" stop-color="#7194A8" />
        </linearGradient>
        <clipPath id="clip0_0_10814">
          <rect width="166.241" height="36" fill="white" />
        </clipPath>
      </defs>
    </svg>
  </div>
</template>

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