<script setup>
defineProps({ pages: Number, stories: Number, images: Number, tables: Number })
</script>

<template>
  <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
    <div
      v-for="stat in [
        { label: 'Pages',   value: pages },
        { label: 'Stories', value: stories },
        { label: 'Images',  value: images },
        { label: 'Tables',  value: tables },
      ]"
      :key="stat.label"
      class="bg-gray-50 rounded-lg px-5 py-4"
    >
      <div class="text-2xl font-bold text-gray-900">{{ stat.value }}</div>
      <div class="text-xs text-gray-400 uppercase tracking-wide mt-0.5">{{ stat.label }}</div>
    </div>
  </div>
</template>
