index.js

import React from "react";
import styled from "styled-components";

export default function Modal({ children, show, closeModal, handleSubmit }) {
  if (!show) return null;

  return (
    <StyledModal>
      <div className="modal">
        <div className="modal-content">
          <div className="modal-header">
            <div className="modal-title">Create new bubble</div>
          </div>
          <div className="modal-body">{children}</div>
          <div className="modal-footer">
            <button className="close-btn" onClick={closeModal}>
              Close
            </button>
            <button className="submit-btn" onClick={handleSubmit}>
              Submit
            </button>
          </div>
        </div>
      </div>
    </StyledModal>
  );
}

const StyledModal = styled.div`
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;

    .modal-content {
      width: MIN(500px, 90vw);
      background: #ffffff;
      .modal-header,
      .modal-footer,
      .modal-body {
        padding: 10px;
      }
      .modal-title {
        margin: 0;
      }
      .modal-body {
        border-top: 1px solid #eeeeee;
        border-bottom: 1px solid #eeeeee;
      }
    }
  }
`;