import { LeftOutlined } 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();
    }
  };

  return (
    <div
      className={`${styles.titleBox} ${tabs ? styles.tabs : ''}`}
      onClick={handleOnClick}
    >
      {returnable || onReturn ? (
        <LeftOutlined
          style={{ fontSize: 36, cursor: 'pointer', marginRight: '20px' }}
        />
      ) : (
        <span className={styles.titleBar} />
      )}

      <span
        className={styles.title}
        style={returnable ? { cursor: 'pointer' } : null}
      >
        {children}
      </span>
    </div>
  );
};
