import React from 'react';
import { observer } from 'mobx-react';
import { AppBase } from '../app/AppBase';

export const AppPopups: React.FC<{ app: AppBase }> = observer(({ app }) => {
  const { popups } = app;

  const list = popups.list;
  if (list.length === 0) {
    return null;
  }

  return (
    <div>
      {list.map((popup) => {
        return <div key={popup.id}>{popup.popup || null}</div>;
      })}
    </div>
  );
});