<template>
  <div>
    <span class="font-weight-bolder">{{ $t('EWallet.EWalletBalance') }}</span>
    <h1 class="mt-2 mb-0 font-weight-bolder" :class="figureClass">
      <b-skeleton v-if="getLoadingState" type="h1"></b-skeleton>
      <span v-else>{{ getEWalletBalance }}</span>
    </h1>
  </div>
</template>

<script>
import { getCurrencyValue } from '@/helpers/currency-formatter'
export default {
  name: 'EWalletBalanceIndicator',
  props: {
    isBusy: { type: Boolean, default: false },
    balance: { type: [String, Number], required: true },
    figureClass: { type: [String, Array], default: () => ['text-black-50'] },
  },
  computed: {
    getEWalletBalance() {
      return getCurrencyValue(this.balance)
    },
    getLoadingState() {
      return this.isBusy
    },
  },
}
</script>
