import { JSX } from 'preact'

type Units = 'rem' | '%' | 'px'

export function AutoGrid(
	{ columnWidth, children, style }: {
		columnWidth: `${number}${Units}`
		children: JSX.Element | JSX.Element[]
		style?: JSX.CSSProperties
	},
) {
	return (
		<div
			class='components__auto_grid'
			style={{
				gridTemplateColumns:
					`repeat(auto-fit, minmax(${columnWidth}, 1fr));`,
				...style,
			}}
		>
			{children}
		</div>
	)
}