component FeatureGrid {
  props {
    color = "primary"
    size = "default"
    columns = 3
    tabletColumns = 2
    mobileColumns = 1
    gap = "md"
    minItemWidth = ""
    equalHeight = true
    align = "stretch"
    maxWidth = "full"
    class = ""
  }

  view {
    <div
      data-ui-component="FeatureGrid"
      data-columns='{columns}'
      data-tablet-columns='{tabletColumns}'
      data-mobile-columns='{mobileColumns}'
      class='grid w-full {class}'
      class:wire-feature-grid-autofit='minItemWidth !== ""'
      class:grid-cols-1='mobileColumns === 1'
      class:grid-cols-2='mobileColumns === 2'
      class:sm:grid-cols-1='tabletColumns === 1'
      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:gap-10='gap === "xl"'
      class:items-stretch='equalHeight || align === "stretch"'
      class:items-start='align === "start"'
      class:items-center='align === "center"'
      class:max-w-5xl='maxWidth === "lg"'
      class:max-w-7xl='maxWidth === "xl"'
      class:max-w-none='maxWidth === "full"'
      style='--wire-feature-grid-min: {minItemWidth || "16rem"};'
    >
      <slot></slot>
    </div>
  }

  style {
    .wire-feature-grid-autofit {
      grid-template-columns: repeat(auto-fit, minmax(var(--wire-feature-grid-min), 1fr));
    }
  }
}