<template>
  <div class="block-overview flex justify-between">
    <left-box :data="data" :loading="loading"></left-box>
    <div class="h-full">
      <right-box
        :loading="loadingRelativeBlockHeight"
        type="last"
        style="margin-bottom: 30px;"
        :height="data.lastBlockHeight"
      ></right-box>
      <right-box
        type="next"
        :loading="loadingRelativeBlockHeight"
        :height="data.nextBlockHeight"
        :init="init"
      ></right-box>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import LeftBox from './LeftBox.vue'
import RightBox from './RightBox.vue'

export default Vue.extend({
  components: {
    LeftBox,
    RightBox,
  },
  props: {
    data: Object,
    init: Function,
    loading: Boolean,
    loadingRelativeBlockHeight: Boolean,
  },
})
</script>

<style></style>
