/**
 * Toggle
 *
 * The single switch control for the whole admin UI.
 *
 * @package Everyone_Accessibility_Suite
 */

function Toggle({ id, label, description, checked, onChange, disabled = false }) {
	return (
		<div className="evas-toggle-field">
			<label className="evas-toggle-label" htmlFor={id}>
				<span className="evas-toggle-switch">
					<input
						type="checkbox"
						id={id}
						checked={!!checked}
						onChange={(e) => onChange(e.target.checked)}
						disabled={disabled}
					/>
					<span className="evas-toggle-slider"></span>
				</span>
				<span className="evas-toggle-content">
					<span className="evas-toggle-text">{label}</span>
					{description && (
						<span className="evas-field-description">{description}</span>
					)}
				</span>
			</label>
		</div>
	);
}

export default Toggle;