import { RoundedCheckbox } from "@components/common/RoundedCheckbox";
import { toggleManualMode } from "@store/settingsSlice";
import type { ReduxStateType } from "@store/types";
import { useDispatch, useSelector } from "react-redux";

export const ManualModeCheckbox = () => {
	const dispatch = useDispatch();
	const manualMode = useSelector(
		(state: ReduxStateType) => state.settings.manualMode,
	);

	return (
		<RoundedCheckbox
			isChecked={manualMode}
			setIsChecked={() => dispatch(toggleManualMode(!manualMode))}
			id="settings-manual-mode"
		/>
	);
};
