import { mergeProps } from "solid-js";

function Modal(props) {
  props = mergeProps(
    { size: "", id: "modal", modalTitle: "Modal", centered: false },
    props
  );

  return (
    <div
      class={"modal fade " + props.size}
      id={props.id}
      tabindex="-1"
      aria-labelledby={props.id + "Label"}
      aria-hidden="true"
      ref={props.ref}
      role="dialog"
    >
      <div
        class="modal-dialog modal-dialog-scrollable modal-fullscreen-md-down modal-lg"
        classList={{ "modal-dialog-centered": props.centered }}
      >
        <div
          class="modal-content"
          style={props.fullHeight ? "height: 100%" : ""}
        >
          <div class="modal-header">
            <h1 class="modal-title fs-5" id={props.id + "Label"}>
              {props.modalTitle}
            </h1>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Schliessen"
            />
          </div>
          {props.children}
        </div>
      </div>
    </div>
  );
}

export default Modal;
