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

export default function FieldSelector( { available, selected, onChange } ) {
	function toggle( key ) {
		if ( selected.includes( key ) ) {
			onChange( selected.filter( ( f ) => f !== key ) );
		} else {
			onChange( [ ...selected, key ] );
		}
	}

	return (
		<div className="aic-field-selector">
			<p className="aic-selector-hint">
				Select which fields to include in the response.
			</p>
			{ Object.entries( available ).map( ( [ key, label ] ) => (
				<CheckboxControl
					key={ key }
					label={ label }
					checked={ selected.includes( key ) }
					onChange={ () => toggle( key ) }
				/>
			) ) }
		</div>
	);
}