import { Divider, Popup } from "antd-mobile";
import { CloseOutline } from "antd-mobile-icons";
import "./index.less";

interface DefinedProps {
  visible: boolean;
  title: string;
  children: React.ReactNode;
  onClose: () => void;
}
function XPopup(props: DefinedProps) {
  const { visible, title, children, onClose } = props;

  return (
    <Popup visible={visible} closeOnMaskClick={true} className="xpopup">
      <div className="header">
        <h3 className="title">{title}</h3>
        <span className="closeIcon" onClick={onClose}>
          <CloseOutline style={{ fontSize: "16px" }} />
        </span>
      </div>
      <Divider />
      <div className="content">{children}</div>
    </Popup>
  );
}

export default XPopup;