Copy

<script setup lang="ts">
import { formatLocalNumber } from "utils/formatting";
import type { Component } from "vue";

defineProps<{
  label: string;
  value?: string | number;
  icon?: Component;
  valueClass?: string;
}>();
</script>

<template>
  <div class="card gap-1">
    <span
      class="stat-label flex items-center gap-1 font-semibold text-stone-400 uppercase"
    >
      <component :is="icon" v-if="icon" size="16" />
      {{ label }}
    </span>
    <div v-if="$slots.default">
      <slot></slot>
    </div>
    <div v-else class="flex h-full items-center justify-center">
      <span :class="[valueClass || 'text-2xl font-bold']">
        {{
          typeof value === "number" ? formatLocalNumber(value) : (value ?? "—")
        }}
      </span>
    </div>
  </div>
</template>