// Key-Value List Component
// Inspired by BIRT Parameter Elements

#let key-value-list(data) = {
  box(width: 100%)[
    #if data.title != none [
      #component-title(text(weight: "semibold", size: font-size-base)[#data.title])
    ]
    
    #if data.layout == "horizontal" [
      #for item in data.items [
        #box(
          inset: spacing-2,
          fill: if item.highlight { color-surface } else { none },
        )[
          #text(weight: "semibold", size: font-size-sm)[#item.key:]
          #h(spacing-2)
          #text(size: font-size-sm)[#item.value]
        ]
        #h(spacing-4)
      ]
    ] else [
      #grid(
        columns: (auto, 1fr),
        column-gutter: spacing-3,
        row-gutter: spacing-2,
        align: (left, left),

        ..data.items.map(item => (
          box(
            inset: (x: spacing-2, y: 2pt),
            fill: if item.highlight { color-surface } else { none },
          )[
            #text(weight: "semibold", size: font-size-sm, fill: color-text-muted)[#item.key]
          ],
          box(
            inset: (x: spacing-2, y: 2pt),
            fill: if item.highlight { color-surface } else { none },
          )[
            #text(size: font-size-sm)[#item.value]
          ],
        )).flatten()
      )
    ]
  ]
}
