import { useState } from "react";

import LoginNumberOrEmail from "./components/LoginNumberOrEmail";
import LoginMobileForm from "./components/LoginMobileForm";
import LoginEmailForm from "./components/LoginEmailForm";

const Login = () => {
  const [loginWithEmail, setLoginWithEmail] = useState<boolean>(false);
  const [isShowLoginNumberOrEmail , setisShowLoginNumberOrEmail] = useState(true);

  return (
    <>
      <div className="w-4/5 rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0 glass">
        <div className="p-6 space-y-4 md:space-y-6 sm:p-8">
          <h1 className="text-2xl font-bold text-center leading-tight tracking-tight md:text-3xl text-white">
            ورود
          </h1>
          {isShowLoginNumberOrEmail && (
            <LoginNumberOrEmail
              loginWithEmail={loginWithEmail}
              setLoginWithEmail={setLoginWithEmail}
            />
          )}
          {!loginWithEmail ? <LoginMobileForm setisShowLoginNumberOrEmail={setisShowLoginNumberOrEmail} /> : <LoginEmailForm />}
        </div>
      </div>
    </>
  );
};

export default Login;