---
export interface Props {
  cols?: 1 | 2 | 3 | 4 | 6 | 12;
  gap?: 'none' | 'small' | 'medium' | 'large';
  class?: string;
}

const {
  cols = 1,
  gap = 'medium',
  class: className = '',
  ...rest
} = Astro.props;

const baseStyles = "grid";

const columns = {
  1: "grid-cols-1",
  2: "grid-cols-1 md:grid-cols-2",
  3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
  4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
  6: "grid-cols-2 md:grid-cols-3 lg:grid-cols-6",
  12: "grid-cols-4 md:grid-cols-6 lg:grid-cols-12"
};

const gaps = {
  none: "",
  small: "gap-4",
  medium: "gap-6",
  large: "gap-8"
};

const classes = `${baseStyles} ${columns[cols]} ${gaps[gap]} ${className}`;
---

<div class={classes} {...rest}>
  <slot />
</div>