---
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>
