<template>
  <div class="c-txStatus">
    <div
      :class="[
        'status',
        status === true ? 'success' : 'faild',
        size === 'small' && 'status-small',
      ]"
      class="flex items-center justify-center"
      :style="statusStyle"
    >
      <img
        :class="[size === 'big' ? ' w-4 h-4' : ' w-3 h-3']"
        :src="!status ? failIcon : successIcon"
        alt=""
      />
      <div
        :style="{
          marginLeft: size === 'big' ? '4px' : '2px',
        }"
      >
        {{
          status === true
            ? $t('lang.components.succ')
            : $t('lang.components.fail')
        }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import failIcon from '@/assets/images/blockChainBrowser/tradeDetail/fail.png'
import successIcon from '@/assets/images/blockChainBrowser/tradeDetail/success.png'
export default Vue.extend({
  props: {
    status: Boolean,
    size: {
      type: String,
      default: 'big',
    },
  },
  data() {
    return {
      failIcon,
      successIcon,
    }
  },
  computed: {
    statusStyle(): any {
      return {
        fontSize: this.size === 'big' ? '14px' : '12px',
      }
    },
  },
})
</script>

<style scoped lang="scss">
.c-txStatus {
  .status {
    width: fit-content;
    padding: 0 10px;
    height: 30px;
    border-radius: 15px;
  }
  .status-small {
    width: fit-content;
    padding: 0 10px;
    height: 20px;
  }
  .success {
    background: rgba(111, 182, 55, 0.1);
    color: rgba(118, 193, 40, 1);
  }
  .faild {
    background: rgba(193, 56, 56, 0.1);
    color: rgba(193, 56, 56, 1);
  }
}
</style>
