import { pxToRem } from '../../utils/utils';

import './css-grid.scss';

export default function CssGrid( props ) {
	const gridStyle = {
		'--eps-grid-columns': props.columns,
		'--eps-grid-spacing': pxToRem( props.spacing ),
		'--eps-grid-col-min-width': pxToRem( props.colMinWidth ),
		'--eps-grid-col-max-width': pxToRem( props.colMaxWidth ),
	};

	return (
		<div style={ gridStyle } className={ `eps-css-grid ${ props.className }` }>
			{ props.children }
		</div>
	);
}

CssGrid.propTypes = {
	className: PropTypes.string,
	children: PropTypes.any.isRequired,
	columns: PropTypes.number,
	spacing: PropTypes.number,
	colMinWidth: PropTypes.number,
	colMaxWidth: PropTypes.number,
};

CssGrid.defaultProps = {
	spacing: 24,
	className: '',
};