<script lang='ts' setup>
import type { BankAccountsData } from "@/api/types";
import { modalController } from "@ionic/vue";

const emit = defineEmits<{
  select: [id: BankAccountsData];
}>();

const { t } = useI18n();

const walletStore = useWalletStore();
const { bankAccounts } = storeToRefs(walletStore);

function handleSelect(item: BankAccountsData) {
  emit("select", item);
  modalController.dismiss(item);
}
</script>

<template>
  <ion-header class="ion-no-border">
    <ion-toolbar class="ion-toolbar">
      <ion-title>{{ t("wallet.selectBankAccount.title") }}</ion-title>
    </ion-toolbar>

    <ion-content>
      <div class="mt-2 flex flex-col">
        <div v-for="item in bankAccounts" :key="item.id" class="flex items-center px-3 my-3 w-full" @click="handleSelect(item)">
          <div class="ml-2 inline-flex gap-2 items-baseline">
            <div class="w-10 h-10 rounded-xl flex items-center justify-center text-white font-bold text-xs shadow-sm bg-[#0F5AA6]">
              <span class="text-white">{{ item.bankCode }}</span>
            </div>
            <span class="font-medium text-md">{{ item.bankName }}</span>
          </div>
        </div>
      </div>
    </ion-content>
  </ion-header>
</template>

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