import { ComponentChildren, JSX } from 'preact'
import { getStyleScope, useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'

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

const scope = getStyleScope(AutoGrid)

export function AutoGrid(
	{ columnWidth, children, style }: {
		columnWidth: `${number}${Units}`
		children: ComponentChildren
		style?: JSX.CSSProperties
	},
) {
	useSmartStylesheet(import.meta, { scope })

	return (
		<div
			class={scope}
			style={{
				gridTemplateColumns: `repeat(auto-fit, minmax(${columnWidth}, 1fr));`,
				...style,
			}}
		>
			{children}
		</div>
	)
}