import { useDispatch, useSelector } from "react-redux";

import { RoundedCheckbox } from "@components/common/RoundedCheckbox";
import { setSound } from "@store/settingsSlice";
import type { ReduxStateType } from "@store/types";

export const SoundCheckbox = () => {
	const dispatch = useDispatch();
	const isSoundOn = useSelector((state: ReduxStateType) => state.settings.sound);

	function toggleSound(value: boolean) {
		dispatch(setSound(!value));
	}

	return (
		<RoundedCheckbox
			isChecked={isSoundOn}
			setIsChecked={() => toggleSound(isSoundOn)}
			id="settings-sound"
		/>
	);
};
