<template>
  <div class="tf-container">
    <div class="tf-balance-box" :style="boxStyle">
      <!-- Balance stats -->
      <div id="balance_wrapper">
        <div class="balance">
          <StatsDetailsRow :stats="stats" />
        </div>
      </div>

      <!-- Footer action buttons -->
      <WalletFooter
        :items="footerItems"
        @item-click="(item, idx) => $emit('footer-click', item, idx)"
      />
    </div>
  </div>
</template>

<script setup>
import StatsDetailsRow from './StatsDetailsRow.vue'
import WalletFooter    from './WalletFooter.vue'

defineProps({
  /**
   * Stats: Array of { title, number, unit, align?, numberId? }
   */
  stats:       { type: Array, required: true },
  /**
   * Footer items: Array of { title, icon?, subtitles? }
   */
  footerItems: { type: Array, required: true },
  boxStyle:    { type: String, default: 'border: solid 2px var(--border-color);' },
})

defineEmits(['footer-click'])
</script>
