// MetricStrip Component
// Horizontal row of equal KPI cells with right-border dividers

#let metric-strip(data) = {
  let n = data.items.len()
  let cols = (1fr,) * n
  let padding = if data.compact { spacing-3 } else { spacing-4 }

  block(
    width: 100%,
    fill: color-surface,
    stroke: (paint: color-border, thickness: component-card-border-width),
    radius: 10pt,
  )[
    #grid(
      columns: cols,
      gutter: 0pt,
      ..data.items.enumerate().map(((i, item)) => {
        let accent = if item.accent_color != none { rgb(item.accent_color) }
          else if item.status == "good"    { color-ok }
          else if item.status == "warn"    { color-warn }
          else if item.status == "bad"     { color-bad }
          else { color-primary }

        block(
          width: 100%,
          inset: (x: padding, y: padding),
          stroke: if i < n - 1 { (right: 0.5pt + color-border) } else { none },
        )[
          #label-text(item.label)
          #v(spacing-2)
          #stack(
            dir: ltr,
            spacing: 3pt,
            text(size: if data.compact { font-size-sm } else { font-size-xl }, weight: "bold", fill: accent)[#item.value],
            if item.unit != none [
              #pad(top: 3pt)[#small-text(item.unit)]
            ],
          )
        ]
      })
    )
  ]
}
