import React, { useMemo } from "react";

import { ServiceNoticeConfirmProps } from "./interface";
import "./styles/index.css";
import Modal from "@components/Modal";
import { NoticeDefaultIcon } from "@icons/NoticeIcon";

/**
 * 服务确认组件
 *
 *
 * ### 引用方法
 * ```tsx
 * import { OrderConfirm } from "@atomintl/exchange-ui"
 * ```
 */
const ServiceNoticeConfirm: React.FC<ServiceNoticeConfirmProps> = props => {
  const { title, description, icon } = props;

  const content = useMemo(
    () => (
      <React.Fragment>
        <div className="nts-service-confirm-icon">{icon ? icon : <NoticeDefaultIcon />}</div>
        <h2 className="nts-service-confirm-title">{title}</h2>
        <div className="nts-service-confirm-description">{description}</div>
      </React.Fragment>
    ),
    [icon, title, description]
  );

  // const onShowConfirm = () => {
  //   Modal.confirm({
  //     hideHead: true,
  //     content: content,
  //     okText: "关闭",
  //     onOk: () => {
  //       alert("确认-confirm")
  //     }
  //   })
  // }
  return (
    <>
      {/* <button onClick={() => onShowConfirm()}>显示-funtion</button> */}
      <Modal {...props} hideHead okText="关闭" PaperProps={{ className: "nts-modal-body-hw-center" }}>
        {content}
      </Modal>
    </>
  );
};

ServiceNoticeConfirm.defaultProps = {};

export { ServiceNoticeConfirmProps } from "./interface";
export default ServiceNoticeConfirm;