import { useState, lazy, Suspense } from 'react';

import Login from './Login/Login';
import classes from './Authentication.module.css';

const Signup = lazy(() => import('./Signup/Signup'));
// Leniwe wczytywanie komponentu Login nie ma tu sensu, ponieważ 
// jest on komponentem domyślnym (domyślny tryb to 'login').

function Authentication() {
  const [mode, setMode] = useState('login');

  function switchAuthModeHandler() {
    setMode((prevMode) => (prevMode === 'login' ? 'signup' : 'login'));
  }

  let authElement = <Login />;
  let switchBtnCaption = 'Utwórz nowe konto';

  if (mode !== 'login') {
    authElement = <Signup />;
    switchBtnCaption = 'Zaloguj';
  }

  return (
    <div className={classes.auth}>
      <h1>Wymagane jest uwierzytelnienie!</h1>
      <Suspense fallback={<p>Wczytywanie...</p>}>{authElement}</Suspense>
      <button className={classes.btn} onClick={switchAuthModeHandler}>{switchBtnCaption}</button>
    </div>
  );
}

export default Authentication;
