component MetricGrid {
  props {
    items = []
    columns = 4
    tabletColumns = 2
    mobileColumns = 1
    gap = "md"
    equalHeight = true
    dividers = false
    size = "default"
    color = "primary"
    variant = "default"
    class = ""
  }

  view {
    <div
      data-ui-component="MetricGrid"
      class='grid w-full grid-cols-1 {class}'
      class:grid-cols-2='mobileColumns === 2'
      class:sm:grid-cols-2='tabletColumns === 2'
      class:sm:grid-cols-3='tabletColumns === 3'
      class:lg:grid-cols-2='columns === 2'
      class:lg:grid-cols-3='columns === 3'
      class:lg:grid-cols-4='columns === 4'
      class:lg:grid-cols-5='columns === 5'
      class:lg:grid-cols-6='columns === 6'
      class:gap-3='gap === "sm"'
      class:gap-5='gap === "md"'
      class:gap-8='gap === "lg"'
      class:divide-y='dividers'
      class:sm:divide-y-0='dividers'
      class:sm:divide-x='dividers'
      class:divide-[var(--wire-color-border)]='dividers'
    >
      {#each items as item}
        <MetricCard
          label='{item.label || item.title}'
          value='{item.value}'
          description='{item.description || ""}'
          icon='{item.icon || ""}'
          prefix='{item.prefix || ""}'
          suffix='{item.suffix || ""}'
          trend='{item.trend || ""}'
          trendLabel='{item.trendLabel || ""}'
          trendDirection='{item.trendDirection || "neutral"}'
          href='{item.href || ""}'
          actionLabel='{item.actionLabel || ""}'
          size='{item.size || size}'
          color='{item.color || color}'
          variant='{dividers ? "minimal" : (item.variant || variant)}'
          align='{item.align || "left"}'
          class="h-full"
        />
      {:empty}
        <slot></slot>
      {/each}
    </div>
  }
}