component Columns {
  props {
    size: string = "default"
    color: string = "primary"
    columns: number = 2
    gap: string = "md"
    maxWidth: string = "xl"
    class: string = ""
  }

  view {
    <div
      data-ui-component="Columns"
      data-size='{size}'
      data-color='{color}'
      data-columns='{columns}'
      data-gap='{gap}'
      class='grid w-full grid-cols-1 items-start {class}'
      class:max-w-3xl='maxWidth === "md"'
      class:max-w-5xl='maxWidth === "lg"'
      class:max-w-7xl='maxWidth === "xl"'
      class:max-w-screen-2xl='maxWidth === "2xl"'
      class:max-w-none='maxWidth === "full"'
      class:md:grid-cols-2='columns >= 2'
      class:lg:grid-cols-3='columns === 3'
      class:lg:grid-cols-4='columns === 4'
      class:gap-3='gap === "sm"'
      class:gap-6='gap === "md"'
      class:gap-10='gap === "lg"'
      class:gap-14='gap === "xl"'
    >
      <slot></slot>
    </div>
  }
}