<script setup>
import { useI18n } from 'vue-i18n';

import { toCurrency } from 'filters/index';

const $props = defineProps({
    amount: {
        type: Number,
        required: true,
    },
});

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

<template>
    <div class="card_balance q-px-md q-py-sm q-my-sm">
        <h6 class="title_balance text-center">{{ t('Total') }}</h6>
        <div class="row">
            <p class="key_balance">{{ t('Balance due') }}:&ensp;</p>
            <b class="value_balance">
                {{ toCurrency($props.amount) }}
            </b>
        </div>
    </div>
</template>

<style lang="scss">
.card_balance {
    border: 1px solid black;
}
.title_balance {
    color: var(--vn-text);
    margin-top: 0;
    margin-bottom: 0;
}
.key_balance {
    color: var(--vn-label);
    margin-bottom: 0;
}
.value_balance {
    color: var(--vn-text);
    margin-bottom: 0;
}
</style>

<i18n>
es:
    Total: Total
    Balance due: Saldo vencido
</i18n>
