<template>
  <div class="c-vote-pack flex items-center px-3.5">
    <div
      class="box text-center flex flex-col justify-center"
      :class="[
        type === 'vote' ? 'text-orange' : ' text-footer-color',
        type === 'vote' ? ' bg-lightOrange' : '  bg-lightBlue3',
      ]"
    >
      <div>
        <span class="text-base font-bold">{{ rewardAmount }}</span>
        <span class="text-xs">
          YCC
        </span>
      </div>
      <div>
        {{ $t('lang.block.blockReward') }}
      </div>
    </div>
    <div class="flex-grow" style="margin-left: 10px;">
      <div class="flex justify-between" style="margin-bottom: 5px;">
        <div class="text-darkBlue text-sm font-bold">
          102938
        </div>
        <div class="text-text-color">
          {{ 2039480923 | formatTime }}
        </div>
      </div>
      <div style="margin-bottom: 5px;">
        <span class="text-text-color text-xs">
          {{ $t('lang.txDetail.txHash') }}:
        </span>
        <span class="text-footer-color text-xs font-bold">
          asdlfkjadlsfk
        </span>
      </div>
      <div>
        <span class="text-text-color text-xs">
          {{ $t('lang.trade.sender') }}:
        </span>
        <span class="text-footer-color text-xs font-bold">
          asdlfkjadlsfk
        </span>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue, { PropType } from 'vue'
export default Vue.extend({
  props: {
    type: String as PropType<'vote' | 'pack'>,
    rewardAmount: Number,
    height: Number,
    txHash: String,
    sender: String,
    timeBlock: Number,
  },
})
</script>
<style lang="scss" scoped>
.c-vote-pack {
  height: 90px;
  background: #ffffff;
  border-radius: 2px;
  border-bottom: 1px solid #f5f5ff;
  .box {
    width: 90px;
    height: 54px;
    border-radius: 2px;
  }
}
</style>
