import type { PropsWithChildren, ReactNode } from 'react';
import { createPortal } from 'react-dom';

interface Props extends PropsWithChildren {
  title: ReactNode;
  onClose(): void;
}

export function Dialog({ title, onClose, children }: Props) {
  const dialog = (
    <div className="dialog-backdrop" role="presentation" onMouseDown={onClose}>
      <section className="dialog-window" role="dialog" aria-modal="true" onMouseDown={event => event.stopPropagation()}>
        <header>
          <h2>{title}</h2>
          <button type="button" onClick={onClose} aria-label="Close window">×</button>
        </header>
        <div className="dialog-body">{children}</div>
      </section>
    </div>
  );
  return createPortal(dialog, document.body);
}