<template>
  <div
    class="c-address-blue-card px-4 flow-root"
    :style="{
      backgroundImage: `url(${balanceBg})`,
    }"
  >
    <div class="flex items-center mt-7 justify-between">
      <div class="yccIcon">
        <img
          src="@/assets/images/blockChainBrowser/address/yccIcon.png"
          class="w-full h-full"
          alt=""
        />
      </div>
      <Select
        size="small"
        :optionPosition="'right'"
        :optionsList="optionsList"
        :selectedValue="selectedValue"
        :searchPlaceholder="$t('lang.searchCurrency')"
        @change="handleSelectChange"
      ></Select>
    </div>
    <div class="text-white mt-3.5 text-xs">
      {{ $t('lang.address.balance') }}
    </div>
    <div class="text-white mt-1 text-3xl font-bold">
      {{ balance | filterAmount }}YCC
    </div>
    <div class="text-white text-xs" style="margin-top: 5px;">
      {{ $t('lang.address.freeze') }}
      {{ forzen | filterAmount }} YCC
    </div>
  </div>
</template>

<script lang="ts">
import Select from '@/components/pc/CurrencySelect.vue'
import balanceBg from '@/assets/images/blockChainBrowser/address/balanceBg-mobile.png'
import Vue from 'vue'
export default Vue.extend({
  components: {
    Select,
  },
  props: {
    forzen: [Number, Object],
    balance: [Number, Object],
    selectedValue: String,
    optionsList: Array,
    handleSelectChange: Function,
  },
  data() {
    return {
      balanceBg,
    }
  },
})
</script>
<style lang="scss" scoped>
.c-address-blue-card {
  height: 180px;
  background-color: #2545cb;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 172px 151px;
  border-radius: 10px;
  .yccIcon {
    width: 25px;
    height: 25px;
  }
}
</style>
