component MetricGrid {
  props {
    label = "Platform metrics"
    metrics = []
    compact = false
    columns = 4
    class = ""
  }

  view {
    <section
      class="wire-metric-grid-shell {compact ? 'wire-metric-grid-shell--compact' : ''} {class}"
      aria-label="{label}"
    >
      <div
        class="wire-metric-grid"
        class:wire-metric-grid--compact='{compact}'
        data-columns="{columns}"
      >
        {#each metrics as metric}
          <article class="wire-metric-card" class:wire-metric-card--compact='{compact}'>
            <strong class="wire-metric-card__value">{metric.value}</strong>
            <span class="wire-metric-card__label">{metric.label}</span>

            {#if metric.description}
              <p class="wire-metric-card__description">{metric.description}</p>
            {/if}
          </article>
        {:empty}
          <p class="wire-metric-grid__empty">No metrics available.</p>
        {/each}
      </div>
    </section>
  }
}