/* eslint-disable react/prop-types */

import * as React from 'react';

function Sidebar( {
	readOnly,
	onReadOnlyChange
} ) {
	return (
		<aside className="paper flex-grow-1">
			<div className="option">
				<div>{'Mode:'}</div>
				<input
					id="read-only"
					type="checkbox"
					name="read-only"
					checked={readOnly}
					onChange={onReadOnlyChange}
				/>
				<label htmlFor="read-only">{'read-only'}</label>
			</div>
		</aside>
	);
}

export default Sidebar;