import { Component, createEffect, createSignal, FlowComponent } from "solid-js";

const Modal: FlowComponent<{ open: boolean }> = (props) => {
  const [isVisible, setVisibility] = createSignal(props.open);
  createEffect(() => {
    if (props.open) {
      setVisibility(true);
    } else {
      setTimeout(function () {
        setVisibility(false);
      }, 200);
    }
  });

  return (
    <div
      classList={{
        "modal print:hidden": true,
        "modal-open": props.open,
        "!visible": isVisible(),
      }}
    >
      <div class="modal-box relative py-16 w-11/12 lg:w-3/4 xl:w-2/3 xxl:w-1/2 lg:p-16 max-w-none overflow-hidden">
        {props.children}
      </div>
    </div>
  );
};

export default Modal;

export const ModalCloseButton: Component<{ onClick: () => void }> = (props) => (
  <label
    class="btn btn-sm btn-circle absolute right-2 top-2"
    onClick={props.onClick}
  >
    ✕
  </label>
);