<script lang='ts' setup>
import Deposit from "./components/deposit.vue";
import Withdraw from "./components/withdraw.vue";

const { t } = useI18n();
const activeTab = ref("deposit");
</script>

<template>
  <ion-page>
    <ion-header class="ion-no-border">
      <ion-toolbar class="ion-toolbar">
        <ui-back-button slot="start" text="" />
        <ion-title>{{ t('wallet.bill.title') }}</ion-title>
      </ion-toolbar>
      <ion-toolbar class="ion-toolbar">
        <ui-tabs v-model="activeTab" size="small" class="px-2">
          <ui-tab-pane name="deposit" :title="t('wallet.bill.depositTab')" />
          <ui-tab-pane name="withdraw" :title="t('wallet.bill.withdrawTab')" />
        </ui-tabs>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true" class="ion-padding-horizontal">
      <Deposit v-if="activeTab === 'deposit'" />
      <Withdraw v-else />
    </ion-content>
  </ion-page>
</template>

<style lang='css' scoped></style>
