import React from 'react';
import { Icon } from 'antd';
import { dispatch } from '@/utils/utils';

import styles from './style.less';
import { routerRedux } from 'dva';

export interface HeaderProps {
  className?: string;
  title?: string | React.ReactNode;
  showReturn?: boolean;
  rightContent?: string | React.ReactNode;
  onReturn?: () => any;
}

const Header: React.FC<HeaderProps> = ({
  className = '',
  title,
  showReturn = true,
  rightContent,
  onReturn,
}) => {
  const onClickBack = () => {
    if (onReturn) {
      onReturn();
    } else {
      dispatch(routerRedux.goBack());
    }
  };
  return (
    <div className={`${styles.header} ${className}`}>
      <div
        onClick={onClickBack}
        className={styles.left}
      >
        {showReturn && <Icon type="left" />}
      </div>
      <div className={styles.title}>
        {title}
      </div>
      <div className={styles.right}>
        {rightContent}
      </div>
    </div>
  );
};

export default Header;
