component StatsBar {
  props {
    items = []
    columns = 4
    compact = true
    dividers = true
    icons = true
    size = "default"
    color = "primary"
    variant = "raised"
    maxWidth = "xl"
    class = ""
  }

  view {
    <Section
      spacing='{compact ? "sm" : "md"}'
      variant='{variant}'
      color='{color}'
      maxWidth='{maxWidth}'
      borderTop="true"
      borderBottom="true"
      class='{class}'
    >
      <div data-ui-component="StatsBar">
        <MetricGrid
          items='{items.map((item) => ({ ...item, icon: icons ? item.icon : "", variant: "minimal", size: compact ? "sm" : size }))}'
          columns='{columns}'
          tabletColumns="2"
          mobileColumns="1"
          gap='{compact ? "sm" : "md"}'
          dividers='{dividers}'
          size='{compact ? "sm" : size}'
          color='{color}'
          variant="minimal"
        />
      </div>
    </Section>
  }
}