import * as React from 'react';
import styles from './styles.less';
import { Modal } from 'antd4';
import { Close_Icon_svg } from '@/Modal/data';
import { staticFileUrl } from '@/config';
import classnames from 'classnames';
import { LocaleProvider } from '@/locales';

const BaseModal = (props: any) => {
  const { visible, headerImg } = props;

  const handleCloseClick = () => {
    if (props?.onCancel) {
      props.onCancel();
    }
  };

  return (
    <LocaleProvider {...props}>
      <Modal
        className={styles.baseModalContainer}
        width={props?.width || 480}
        destroyOnClose={true}
        centered={true}
        closable={false}
        visible={visible}
        footer={null}
      >
        <div className={styles.modalContainer}>
          {/* 头部区域 */}
          <div className={classnames(styles.headerGroup)}>
            {/* 头部背景区域 */}
            <img
              className={styles.headerBg}
              src={`${staticFileUrl}/headerBg.png`}
            />
            <div className={styles.closeIcon} onClick={handleCloseClick}>
              <Close_Icon_svg />
            </div>
          </div>
          <div className={styles.contentGroup}>{props.children}</div>
        </div>
      </Modal>
    </LocaleProvider>
  );
};

BaseModal.defaultProps = {
  headerImg: 'normal',
};

export default BaseModal;