<template>
  <article :class="['metric-card', `metric-card-${index % 4}`]">
    <span class="metric-icon"><component :is="card.icon" :size="24" /></span>
    <div>
      <strong>{{ card.value }}</strong>
      <span>{{ card.label }}</span>
    </div>
  </article>
</template>

<script setup>
defineProps({
  card: { type: Object, required: true },
  index: { type: Number, default: 0 }
});
</script>
