<script setup lang="ts">
import { computed } from 'vue';
import { RouterLink, useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const route = useRoute();

const tabs = [
  {
    path: '/wallet',
    labelKey: 'wallet.my_balance',
    match: (p: string) => p === '/wallet',
  },
  {
    path: '/wallet/detail',
    labelKey: 'wallet.view_all',
    match: (p: string) =>
      p === '/wallet/detail' ||
      p.startsWith('/wallet/transactions/'),
  },
  {
    path: '/wallet/recharge/history',
    labelKey: 'wallet.recharge_history',
    match: (p: string) => p.startsWith('/wallet/recharge/history'),
  },
  {
    path: '/wallet/cashbacks',
    labelKey: 'wallet.cashbacks_tab',
    match: (p: string) => p === '/wallet/cashbacks' || p === '/profile/cashbacks',
  },
];

const activePath = computed(() => route.path);
</script>

<template>
  <nav class="desktop-wallet-subnav" :aria-label="t('nav.my_wallet')">
    <RouterLink
      v-for="tab in tabs"
      :key="tab.path"
      :to="tab.path"
      class="desktop-wallet-subnav-link"
      :class="{ active: tab.match(activePath) }"
    >
      {{ t(tab.labelKey) }}
    </RouterLink>
  </nav>
</template>
