<template>
    <div class="row align-items-center" v-if="item">
        <div class="col">
            <div class="row m-b-5">
                <div class="col">
                    <div class="font-heading fs-10 muted all-caps">Bank In Amount</div>
                    <div class="font-heading fs-14">
                        <span class="text-success bold">{{ (Math.round((item.original_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }} {{ item.original_currency?.short_code }}</span>
                    </div>
                </div>
            </div>
            <div class="row" v-if="item.recipient_bank_account">
                <div class="col">
                    <div class="font-heading all-caps fs-10 bold">{{ item.recipient_bank_account.holder_name }}</div>
                </div>
            </div>
            <div class="row" v-if="item.recipient_bank_account">
                <div class="col">
                    <div class="font-heading all-caps fs-10 bold">
                        {{ item.recipient_bank_account.bank_name }}
                        <span class="m-l-5" v-if="item.recipient_bank_account.bank_branch">({{ item.recipient_bank_account.bank_branch }})</span>: 
                        <span class="text-primary">{{ item.recipient_bank_account.type === 3 ? item.recipient_bank_account.account_no : item.recipient_bank_account.account_no?.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim() }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useComponentHandler } from '@/composables/useComponentHandler';

interface Props {
    data?: any;
    section?: string;
}

const props = withDefaults(defineProps<Props>(), {
    section: 'banksSection'
});

const { item } = useComponentHandler(props);
</script>