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

export const NotificationCheckbox = () => {
	const dispatch = useDispatch();
	const isNotificationsOn = useSelector(
		(state: ReduxStateType) => state.settings.notifications,
	);

	function toggleNotif(value: boolean) {
		dispatch(enableNotifications(value));
	}

	return (
		<RoundedCheckbox
			isChecked={isNotificationsOn}
			setIsChecked={() => toggleNotif(!isNotificationsOn)}
			id="settings-notification"
		/>
	);
};
