<template>
  <div class="flex items-center gap-1 bg-muted/30 rounded-lg p-1">
    <!-- Platinum -->
    <div class="flex items-center gap-1 px-2 py-1 rounded bg-blue-900/50 border border-blue-700/30">
      <div class="w-3 h-3 rounded-full bg-gradient-to-br from-slate-300 to-slate-500 border border-slate-400"></div>
      <span class="text-xs font-mono font-bold text-blue-100">{{ currency.platinum }}</span>
    </div>
    
    <!-- Gold -->
    <div class="flex items-center gap-1 px-2 py-1 rounded bg-yellow-900/50 border border-yellow-700/30">
      <div class="w-3 h-3 rounded-full bg-gradient-to-br from-yellow-300 to-yellow-500 border border-yellow-400"></div>
      <span class="text-xs font-mono font-bold text-yellow-100">{{ formattedCurrency.gold }}</span>
    </div>
    
    <!-- Silver -->
    <div class="flex items-center gap-1 px-2 py-1 rounded bg-gray-700/50 border border-gray-600/30">
      <div class="w-3 h-3 rounded-full bg-gradient-to-br from-gray-300 to-gray-500 border border-gray-400"></div>
      <span class="text-xs font-mono font-bold text-gray-100">{{ formattedCurrency.silver }}</span>
    </div>
    
    <!-- Copper -->
    <div class="flex items-center gap-1 px-2 py-1 rounded bg-orange-900/50 border border-orange-700/30">
      <div class="w-3 h-3 rounded-full bg-gradient-to-br from-orange-300 to-orange-500 border border-orange-400"></div>
      <span class="text-xs font-mono font-bold text-orange-100">{{ formattedCurrency.copper }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { satoshisToEverQuest, type EverQuestCurrency } from '@/lib/utils/currency'

interface Props {
  balanceMsat: number
}

const props = defineProps<Props>()

const currency = computed<EverQuestCurrency>(() => {
  const satoshis = Math.floor(props.balanceMsat / 1000)
  return satoshisToEverQuest(satoshis)
})

// Format currency values to always show 2 digits with leading zeros
const formattedCurrency = computed(() => {
  return {
    platinum: currency.value.platinum,
    gold: currency.value.gold.toString().padStart(2, '0'),
    silver: currency.value.silver.toString().padStart(2, '0'),
    copper: currency.value.copper.toString().padStart(2, '0')
  }
})
</script> 
