<script setup lang="ts">
import { cellular, chatboxEllipses, compass, personCircle, swapHorizontal } from "ionicons/icons";

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

<template>
  <ion-page>
    <ion-tabs>
      <ion-router-outlet />
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="riwa" href="/layout/riwa">
          <div class="flex-col-center gap-1">
            <ion-icon aria-hidden="true" :icon="compass" class="icon" />
            <ion-label>{{ t('tabs.riwa') }}</ion-label>
          </div>
        </ion-tab-button>

        <ion-tab-button tab="market" href="/layout/market">
          <div class="flex-col-center gap-1">
            <ion-icon aria-hidden="true" :icon="cellular" class="icon" />
            <ion-label>{{ t('tabs.market') }}</ion-label>
          </div>
        </ion-tab-button>

        <ion-tab-button tab="trade" href="/layout/trade">
          <div class="flex-col-center gap-1">
            <ion-icon aria-hidden="true" :icon="swapHorizontal" class="icon" />
            <ion-label>{{ t('tabs.trade') }}</ion-label>
          </div>
        </ion-tab-button>

        <!-- <ion-tab-button tab="chat" href="/layout/chat">
          <div class="flex-col-center gap-1">
            <ion-icon aria-hidden="true" :icon="chatboxEllipses" class="icon" />
            <ion-label>{{ t('tabs.chat') }}</ion-label>
          </div>
        </ion-tab-button> -->

        <ion-tab-button tab="notify" href="/layout/notify">
          <div class="flex-col-center gap-1">
            <ion-icon aria-hidden="true" :icon="chatboxEllipses" class="icon" />
            <ion-label>{{ t('tabs.notify') }}</ion-label>
          </div>
        </ion-tab-button>

        <ion-tab-button tab="user" href="/layout/user">
          <div class="flex-col-center gap-1">
            <ion-icon aria-hidden="true" :icon="personCircle" class="icon" />
            <ion-label>{{ t('tabs.user') }}</ion-label>
          </div>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

<style  scoped>
ion-tab-bar {
  height: 60px;
  --background: var(--ion-background-color);
  box-shadow: 0px 0px 12px rgba(45, 213, 90, 0.21);
  padding-bottom: var(--ion-safe-area-bottom);
}
.icon {
  font-size: 1.5rem;
}
</style>
