<template>
  <div class="metric-card" :class="`metric-card--${tone}`">
    <p class="metric-card__label">{{ label }}</p>
    <p class="metric-card__value">{{ value }}</p>
    <p v-if="hint" class="metric-card__hint">{{ hint }}</p>
  </div>
</template>

<script setup>
defineProps({
  label: { type: String, required: true },
  value: { type: [String, Number], required: true },
  hint: { type: String, default: '' },
  tone: { type: String, default: 'default' },
})
</script>

<style scoped>
.metric-card {
  padding: 20px 22px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

.metric-card__label {
  margin: 0;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.metric-card__value {
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.metric-card__hint {
  margin: 0;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.5;
}

/* Tones */
.metric-card--default .metric-card__value { color: #0f172a; }
.metric-card--success .metric-card__value { color: #059669; }
.metric-card--warning .metric-card__value { color: #d97706; }
.metric-card--danger  .metric-card__value { color: #e11d48; }
.metric-card--info    .metric-card__value { color: #2563eb; }

.metric-card--success { border-color: #d1fae5; background: #f0fdf4; }
.metric-card--warning { border-color: #fde68a; background: #fffbeb; }
.metric-card--danger  { border-color: #fecdd3; background: #fff1f2; }
.metric-card--info    { border-color: #bfdbfe; background: #eff6ff; }
</style>
