// import { Box } from "@material-ui";
import * as React from "react";
// import ForgotPasswordAcknowledgement from "./ForgotPasswordAcknowledgement";
// import ForgotPasswordEmail from "./ForgotPasswordEmail";
import SignInPhase from "./SignInPhase";
// import ResetPassword from "./ResetPassword";
// import PasswordResetAcknowledgement from './PasswordResetAcknowledgement';
import { Box } from "@mui/material";
import MailVerificationLink from "./MailVerificationLink";
// import useResponsive from "../../hooks/useResponsive";

const SignInHOC = () => {
	const [phase, setPhase] = React.useState("signin");
	const [dataSet, setDataSet] = React.useState(null);
	const [newotp, setNewotp] = React.useState(null);

	// const { isWeb, isTab } = useResponsive();

	const ChangePhase = (phaseValue) => {
		setPhase(phaseValue);
	};

	return (
		<Box px={4}>
			{phase === "signin" && (
				<SignInPhase
					onPhaseChange={ChangePhase}
					onDataSet={(data) => setDataSet(data)}
				/>
			)}

			{phase === "mailVerificationLink" && dataSet && (
				<MailVerificationLink onPhaseChange={ChangePhase} dataSet={dataSet} />
			)}
		</Box>
	);
};

export default SignInHOC;
