<template>
  <div class="flex items-center gap-2 bg-[#0f0816] border border-[#4a3b5e] px-2 py-1 rounded-sm">
    <div class="w-4 h-4 flex items-center justify-center">
        <slot name="icon">
            <component :is="icon" v-if="icon" :size="14" :style="{ color: color }" />
        </slot>
    </div>
    <div class="flex flex-col leading-none">
      <span v-if="label" class="text-[8px] text-[#8f80a0] uppercase">{{ label }}</span>
      <span class="font-mono text-sm font-bold text-[#e0d8f0]">{{ value }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Component } from 'vue';

interface Props {
  icon?: Component;
  value: number | string;
  label?: string;
  color?: string;
}

withDefaults(defineProps<Props>(), {
  color: '#e0d8f0'
});
</script>
