export default function Toggle( { label, help, checked, onChange } ) {
	return (
		<label className="rtgw-toggle-row">
			<span
				className={ `rtgw-toggle ${ checked ? 'is-on' : '' }` }
				role="switch"
				aria-checked={ checked }
				tabIndex={ 0 }
				onClick={ () => onChange( ! checked ) }
				onKeyDown={ ( e ) => {
					if ( e.key === 'Enter' || e.key === ' ' ) {
						e.preventDefault();
						onChange( ! checked );
					}
				} }
			>
				<span className="rtgw-toggle__thumb" />
			</span>
			<span className="rtgw-toggle-row__text">
				<span className="rtgw-toggle-row__label">{ label }</span>
				{ help && <span className="rtgw-toggle-row__help">{ help }</span> }
			</span>
		</label>
	);
}