<script lang='ts' setup>
import { toastController } from "@ionic/vue";

const emit = defineEmits<{
  (e: "close"): void;
}>();

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

async function handleCryptoRecharge() {
  emit("close");
  const toast = await toastController.create({
    message: t("user.comingSoon"),
    duration: 2000,
    position: "top",
    color: "primary",
  });
  await toast.present();
}
async function handleFiatRecharge() {
  emit("close");
  router.push("/deposit/fiat");
}
</script>

<template>
  <div class="w-full h-50 p-5 flex justify-center flex-col gap-7.5">
    <div class="flex items-center gap-2.5" @click="handleCryptoRecharge">
      <i-ic-baseline-downloading class="text-2xl" />
      <ion-label class="flex-1">
        <h2>{{ t("recharge.channel.chainRecharge") }}</h2>
        <p class="w-[80%] text-sm">
          {{ t("recharge.channel.chainRechargeDesc") }}
        </p>
      </ion-label>
      <i-ic-round-arrow-forward-ios class="ml-auto text-text-400" />
    </div>

    <div class="flex items-center gap-2.5" @click="handleFiatRecharge">
      <i-ic-baseline-data-saver-off class="text-2xl" />
      <ion-label class="flex-1">
        <h2>{{ t("recharge.channel.fiatCurrency") }}</h2>
        <p class="w-[80%] text-sm">
          {{ t("recharge.channel.fiatCurrencyDesc") }}
        </p>
      </ion-label>
      <i-ic-round-arrow-forward-ios class="ml-auto text-text-400" />
    </div>
  </div>
</template>

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