<script lang="ts">
export interface NavSecondaryItem {
  label: string
  to: string
}
</script>

<script lang="ts" setup>
defineProps<{
  navs: NavSecondaryItem[]
}>()

const route = useRoute()

const isCurrentPath = (path: string) => {
  return route.path === path
}
</script>

<template>
  <div class="flex items-end ml-4 z-0">
    <div
      v-for="(nav, i) in navs"
      :key="i"
      class="subnav-item"
      :class="`${isCurrentPath(nav.to) ? 'active' : ''}`"
      :style="{
        'z-index': isCurrentPath(nav.to) ? 10 : -i,
      }"
    >
      <svg
        class="absolute inset-0 aspect-auto top-1"
        viewBox="0 0 206.5 72"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <defs>
          <linearGradient
            :id="`paint_linear_${i}`"
            gradient-units="objectBoundingBox"
            x1="0.5"
            y1="0"
            x2="0.5"
            y2="1"
          >
            <stop stop-color="var(--svg-stop1)" />
            <stop
              offset="1"
              stop-color="var(--svg-stop2)"
            />
          </linearGradient>
        </defs>
        <g>
          <path
            id="subnav_item_active"
            d="M51.9 0L154.6 0C172.19 0 187.72 11.48 192.86 28.31L206.5 72L0 72L13.35 28.31C18.49 11.48 34.02 0 51.9 0Z"
            :fill="`url(#paint_linear_${i})`"
            fill-opacity="1.000000"
            fill-rule="evenodd"
          />
        </g>
      </svg>
      <NuxtLink
        class="text-base font-medium z-10 select-none pb-0.5"
        :class="{
          'text-secondary': isCurrentPath(nav.to),
          'text-neutral-400 dark:text-neutral-500': !isCurrentPath(nav.to),
        }"
        :to="nav.to"
      >
        {{ nav.label }}
      </NuxtLink>
    </div>
  </div>
</template>

<style scoped>
.subnav-item {
  @apply relative flex justify-center items-center px-5 pt-2 drop-shadow-lg;

  --svg-stop1: #ffffff;
  --svg-stop2: #f3f3f3;

  &:not(:first-of-type) {
    @apply -ml-4;
  }

  &.active {
    --svg-stop1: #6059f4;
    --svg-stop2: #8e59f4;
  }
}

.dark .subnav-item {
  --svg-stop1: #000000;
  --svg-stop2: #0c0c0c;

  &.active {
    --svg-stop1: #6d7ca6;
    --svg-stop2: #6f6da6;
  }
}
</style>
