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

<template>
  <NuxtLink :to="to" class="flex-shrink-0 w-[190px] h-[50px] group relative flex justify-center items-center" active-class="selected">
    <div class="flex items-center justify-center gap-2">
      <Iconify :icon="icon" class="w-5 h-5 " />
      <div class="font-medium scale-105">
        {{ name }}
      </div>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" class="absolute -z-10 w-[228px] h-[50px]" width="228" height="50" fill="none" viewBox="0 0 228 50">
      <g clip-path="url(#a-item)">
        <path
          fill="url(#b-item)" class="transition-opacity opacity-0 group-hover:opacity-100 group-hover:animate-pulse"
          fill-rule="evenodd" d="M26 2h170l32 47.726H0L26 2Z" clip-rule="evenodd"
        />
        <path
          fill="url(#c-item)" class="opacity-0 group-hover:opacity-100 group-hover:animate-pulse" fill-rule="evenodd"
          d="M26 2h170l32 47.726H0L26 2Z" clip-rule="evenodd"
        />
        <path fill="url(#d-item)" class="opacity-0 group-hover:opacity-100" d="M30 48h133v2H30z" />
        <g
          filter="url(#e-item)" style="mix-blend-mode:plus-lighter"
          class="transition-opacity duration-500 delay-200 opacity-0 group-hover:opacity-100 group-hover:animate-pulse"
        >
          <path fill="#EFF9FF" fill-rule="evenodd" d="m104.174 50 3.601-6.46 4.051 6.46h-7.652Z" clip-rule="evenodd" />
        </g>
        <path
          class="transition-opacity duration-500 delay-100 opacity-0 group-hover:opacity-100" fill="#EFF9FF"
          fill-rule="evenodd" d="m104.77 50 3.04-5.453L111.23 50h-6.46Z" clip-rule="evenodd"
          style="mix-blend-mode:plus-lighter"
        />
        <path stroke="url(#f-item)" d="M26 1.5h-.298l-.142.262-26 48-.4.738h229.774l-.518-.777-32-48-.148-.223H26Z" />
        <path fill="#AACDEB" d="M25.251.555h2v2h-2zm170 0h2v2h-2z" class="group-hover:animate-pulse" />
      </g>
      <defs>
        <radialGradient
          id="b-item" cx="0" cy="0" r="1" gradientTransform="matrix(0 57.8766 -506.007 0 114 49.726)"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#81C2F0" />
          <stop offset="1" stop-color="#1D2E35" stop-opacity=".01" />
        </radialGradient>
        <radialGradient
          id="c-item" cx="0" cy="0" r="1" gradientTransform="matrix(0 57.8766 -506.007 0 114 49.726)"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#81C2F0" />
          <stop offset="1" stop-color="#1D2E35" stop-opacity=".01" />
        </radialGradient>
        <linearGradient id="d-item" x1="64.693" x2="64.839" y1="49.989" y2="45.08" gradientUnits="userSpaceOnUse">
          <stop stop-color="#fff" stop-opacity=".01" />
          <stop offset=".484" stop-color="#fff" stop-opacity=".5" />
          <stop offset="1" stop-color="#fff" stop-opacity=".01" />
        </linearGradient>
        <linearGradient id="f-item" x1="51.918" x2="51.918" y1="2" y2="28.14" gradientUnits="userSpaceOnUse">
          <stop stop-color="#7194A8" />
          <stop offset="1" stop-color="#7194A8" stop-opacity=".01" />
        </linearGradient>
        <clipPath id="a-item">
          <path fill="#fff" d="M0 .555h228V50H0z" />
        </clipPath>
        <filter
          id="e-item" width="34.834" height="33.642" x="90.583" y="29.949" color-interpolation-filters="sRGB"
          filterUnits="userSpaceOnUse"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
          <feGaussianBlur result="effect1_foregroundBlur_56_692" stdDeviation="6.796" />
        </filter>
      </defs>
    </svg>
  </NuxtLink>
</template>

<style>
.selected svg path{
  opacity: 100;
}
</style>
