import { CheckboxControl } from '@wordpress/components';

const CheckboxField = ({ field, value, onChange }) => {
	const selected = Array.isArray(value) ? value : [];

	const toggle = (key, checked) => {
		onChange(checked ? [...selected, key] : selected.filter((v) => v !== key));
	};

	return (
		<fieldset>
			<legend className="jvb-field-label">{field.label}</legend>
			{Object.entries(field.options || {}).map(([key, label]) => (
				<CheckboxControl
					key={key}
					label={label}
					checked={selected.includes(key)}
					onChange={(checked) => toggle(key, checked)}
				/>
			))}
		</fieldset>
	);
};

export default CheckboxField;