import { ToggleCard } from './ToggleCard';

export function ToggleCardGrid( {
	options,
	values,
	onChange,
	cols = 3,
	disabled,
} ) {
	return (
		<div
			className="grid gap-3"
			style={ {
				gridTemplateColumns: `repeat(${ cols }, minmax(0, 1fr))`,
			} }
		>
			{ options.map( ( option ) => (
				<ToggleCard
					key={ option.value }
					label={ option.label }
					checked={ !! values[ option.value ] }
					onChange={ ( v ) => onChange( option.value, v ) }
					disabled={ disabled }
				/>
			) ) }
		</div>
	);
}