<script lang='ts' setup>
import { cashOutline, homeOutline, logoUsd, swapHorizontalOutline } from "ionicons/icons";

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

<template>
  <div class="mt-10">
    <ion-label class="text-xs font-medium text-text-300">
      {{ t("asset.purchase.purchaseAsset") }}
    </ion-label>
    <div class="grid grid-cols-4 mt-5">
      <div class="col-span-1 flex-col-center gap-2">
        <ion-icon :icon="cashOutline" />
        <div class="text-xs">
          {{ t("asset.purchase.fiatPurchase") }}
        </div>
      </div>
      <div class="col-span-1 flex-col-center gap-2">
        <ion-icon :icon="logoUsd" />
        <div class="text-xs">
          {{ t("asset.purchase.cryptoPurchase") }}
        </div>
      </div>
      <div class="col-span-1 flex-col-center gap-2">
        <ion-icon :icon="homeOutline" />
        <div class="text-xs">
          {{ t("asset.purchase.realEstate") }}
        </div>
      </div>
      <div class="col-span-1 flex-col-center gap-2">
        <ion-icon :icon="swapHorizontalOutline" />
        <div class="text-xs">
          {{ t("asset.purchase.assetExchange") }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='css' scoped>
ion-icon {
  font-size: 1.5rem;
  color: var(--ion-color-primary);
}
</style>
