import React, { useMemo } from "react"

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

/**
 * 服务确认组件
 *
 *
 * ### 引用方法
 * ```tsx
 * import { ExclamationConfirm } from "@atomintl/exchange-ui"
 * ```
 */
const ExclamationConfirm: React.FC<ExclamationConfirmProps> = props => {
  const { title, description, icon, onCancel } = 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]
  )
  
  return (
    <>
      <Modal
        {...props}
        hideHead
        cancelConfig={{
          className: `cancelButtonStyle`
        }}
        onCancel={onCancel}
        cancelText={`取消`}
        okText={`确认`}
        PaperProps={{ className: "nts-modal-body-hw-center" }}
      >
        {content}
      </Modal>
    </>
  )
}

ExclamationConfirm.defaultProps = {}

export { ExclamationConfirmProps } from "./interface"
export default ExclamationConfirm