import type { ModalProps } from 'antd';
import { Modal } from 'antd';
import styles from './index.less';

interface HncyModalProps extends ModalProps {
  height?: number;
  minHeight?: number;
  padding?: string | number;
  bgColor?: React.CSSProperties;
  bodyStyle?: React.CSSProperties;
  titleRender?: () => JSX.Element;
}
const HncyModal = (props: HncyModalProps) => {
  const {
    children,
    title,
    onCancel,
    height,
    minHeight,
    style,
    padding,
    titleRender,
    bodyStyle,
    ...reset
  } = props;
  return (
    <Modal
      onCancel={onCancel}
      footer={null}
      destroyOnClose
      maskClosable
      classNames={{
        mask: styles.mask,
      }}
      {...reset}
      style={{ pointerEvents: 'auto', ...style }}
      wrapClassName="hncyModal"
    >
      <div
        className={styles.modalWrap}
        style={{ height, minHeight, padding, ...bodyStyle }}
      >
        <div className={styles.head}>
          {titleRender ? titleRender() : title && <p>{title}</p>}
        </div>
        <div
          className={styles.content}
          style={{
            height: title || titleRender ? 'calc(100% - 80px)' : '100%',
          }}
        >
          {children}
        </div>
      </div>
    </Modal>
  );
};

export default HncyModal;
