import { CaretLeftFilled } from '@ant-design/icons';
import { history } from '@umijs/max';
import styles from './index.less';

export default (props) => {
  const { tabs = false, children, returnable = false, onReturn } = props;

  const handleOnClick = () => {
    if (onReturn) {
      onReturn();
    } else if (returnable) {
      history.back();
    }
  };

  const isSubPage = returnable || onReturn;

  return (
    <div
      className={`${styles.titleBox} ${tabs ? styles.tabs : ''} ${
        isSubPage ? styles.subPage : ''
      }`}
    >
      {isSubPage && (
        <CaretLeftFilled
          style={{
            fontSize: '0.3rem',
            cursor: 'pointer',
            marginRight: '0.15rem',
            color: '#0139F1',
          }}
          onClick={handleOnClick}
        />
      )}

      {children && (
        <span
          className={`${styles.title}`}
          style={returnable ? { cursor: 'pointer' } : null}
          onClick={handleOnClick}
        >
          {children}
        </span>
      )}
    </div>
  );
};
