import { createPortal } from 'react-dom';

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

function ErrorDialog({ onClose }) {
  return createPortal(
    <>
      <div className={classes.backdrop}></div>
      <dialog className={classes.dialog} open>
        <p>
          Formularz zawiera niepoprawne wartości. Popraw błędy
          przed ponownym przesłaniem formularza!
        </p>
        <button onClick={onClose}>OK</button>
      </dialog>
    </>,
    document.getElementById('dialogs')
  );
}

export default ErrorDialog;
