<template>
  <div class="metrics">
    <div v-for="item in items" :key="item.label" class="metric-card">
      <div class="label">{{ item.label }}</div>
      <div class="value">{{ item.value }}</div>
      <div class="note">{{ item.note }}</div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  items: Array,
});
</script>

<style scoped>
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.metric-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(0, 229, 197, 0.08));
  box-shadow: var(--shadow-soft);
}

.label {
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.value {
  font-size: 26px;
  font-weight: 800;
  margin: 6px 0;
  color: var(--text-strong);
}

.note {
  color: var(--text-muted);
  font-size: 13px;
  white-space: pre-wrap;
}
</style>
