import { createPortal } from 'react-dom';

import classes from './ResetPassword.module.css';

function ResetPassword({ onFinish }) {
  // Użyj wywołania createPortal, aby wstrzyknąć okno modalne z procesem
  // resetowania hasła. Ten proces może być dość skomplikowany (z pytaniami
  // o ulubione zwierzę itd.).  
  return createPortal(
    <>
      <div className={classes.backdrop} onClick={onFinish}>
        <dialog className={classes.modal}>
          <h2>Resetuj hasło</h2>
          <p>
            Tu normalnie zacząłby się skomplikowany proces resetowania hasła.
          </p>
          <p>W tym przykładzie ten proces jest pomijany i nic się nie dzieje.</p>
          <p>
            Załóżmy jednak, że proces jest złożony i wymaga sporo kodu Reacta.
          </p>
          <button onClick={onFinish}>Zamknij</button>
        </dialog>
      </div>
    </>,
    document.getElementById('overlay')
  );
}

export default ResetPassword;
