<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { RouterLink } from 'vue-router';
import DesktopWalletSubNav from './DesktopWalletSubNav.vue';

defineProps<{
  showRecharge?: boolean;
}>();

const { t } = useI18n();
</script>

<template>
  <header class="desktop-records-header wallet-page-header">
    <div class="wallet-page-header-main">
      <DesktopWalletSubNav />
    </div>
    <div class="desktop-records-actions">
      <slot name="actions">
        <RouterLink
          v-if="showRecharge !== false"
          to="/wallet/recharge"
          class="desktop-records-action-btn"
        >
          {{ t('wallet.recharge_btn') }}
        </RouterLink>
      </slot>
    </div>
  </header>
</template>

<style scoped>
.wallet-page-header {
  align-items: center;
}

.wallet-page-header-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
</style>
