import React from 'react';
import ReactDOM from 'react-dom';
import { ModalCenter, Modal, ModalSection, Button } from 'furl-components';

const modalCenterRef = React.createRef();

ReactDOM.render(
  <div>
    <ModalCenter ref={modalCenterRef} />
    <Button color='primary' onClick={() => {
      modalCenterRef.current.setContent(
        <Modal>
          <ModalSection>
            <h5>Howdy, there!</h5>
            <p>Nice to see you here. You can learn more about our website by visiting more pages.</p>
            <Button color='primary' onClick={() => modalCenterRef.current.hide()}>Take me back</Button>
          </ModalSection>
        </Modal>
      );

      modalCenterRef.current.show();
    }}>Open modal dialog</Button>
  </div>, 
  document.getElementById('root')
);