<script lang='ts' setup>
import { calendarOutline, listOutline, timeOutline, walletOutline } from "ionicons/icons";

const { t } = useI18n();
const router = useRouter();

function navigateToTotal() {
  router.push("/revenue/total");
}

function navigateToMonthly() {
  router.push("/revenue/monthly");
}

function navigateToPending() {
  router.push("/revenue/pending");
}

function navigateToRecords() {
  router.push("/revenue/records");
}
</script>

<template>
  <div>
    <ion-label class="text-md font-semibold">
      {{ t("asset.revenue.myRevenue") }}
    </ion-label>
    <div class="grid grid-cols-4 mt-5">
      <div
        class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70"
        @click="navigateToTotal"
      >
        <ion-icon :icon="walletOutline" class="text-2xl text-primary" />
        <div class="text-xs">
          {{ t("asset.revenue.totalRevenue") }}
        </div>
      </div>
      <div
        class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70"
        @click="navigateToMonthly"
      >
        <ion-icon :icon="calendarOutline" class="text-2xl text-primary" />
        <div class="text-xs">
          {{ t("asset.revenue.monthlyRevenue") }}
        </div>
      </div>
      <div
        class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70"
        @click="navigateToPending"
      >
        <ion-icon :icon="timeOutline" class="text-2xl text-primary" />
        <div class="text-xs">
          {{ t("asset.revenue.pendingRevenue") }}
        </div>
      </div>
      <div
        class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70"
        @click="navigateToRecords"
      >
        <ion-icon :icon="listOutline" class="text-2xl text-primary" />
        <div class="text-xs">
          {{ t("asset.revenue.revenueDetails") }}
        </div>
      </div>
    </div>
  </div>
</template>
