<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="home" href="/layout/home">
          <div class="flex-col-center gap-1">
            <ion-icon aria-hidden="true" :icon="compass" class="icon" />
            <ion-label>{{ t('tabs.home') }}</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 var(--ion-color-tertiary);
  padding-bottom: var(--ion-safe-area-bottom);
}
.icon {
  font-size: 1.5rem;
}
</style>
