import React, { FC, ReactType, useState } from 'react';
import Layout from '../Layout';
import css from './index.module.css';

interface LoginPageProps {
  LoginForm: ReactType;
  ResetPasswordForm: ReactType;
  translations: {
    login: string;
    resetPassword: string;
  };
}

const LoginPage: FC<LoginPageProps> = ({
  LoginForm,
  ResetPasswordForm,
  translations,
}) => {
  const [isResetPassword, setResetPassword] = useState(false);
  return (
    <Layout>
      <div className={css.login__box}>
        <h1>
          {!isResetPassword ? translations.login : translations.resetPassword}
        </h1>
        <div className={css.login__form}>
          {!isResetPassword ? (
            <LoginForm
              handlePasswordForgot={(): void => setResetPassword(true)}
            />
          ) : (
            <ResetPasswordForm
              handleAlreadyRegistered={(): void => setResetPassword(false)}
            />
          )}
        </div>
      </div>
    </Layout>
  );
};

export default LoginPage;