import React, { useCallback } from 'react';
import classNames from 'classnames';
import { XuiReactReturnIcon } from '@jy-fe/icons';
import { HeadLineProps } from './xui-head-line.d';

const XuiHeadLine: React.FC<HeadLineProps> = ({
  className: wrapperClassName = '',
  style = {},
  title = '',
  isDetail,
  onBack,
  extra,
}) => {
  const className = 'xui-ant__head-line';

  const goBack = useCallback(() => {
    if (onBack) {
      onBack();
    } else {
      history.back();
    }
  }, []);

  return (
    <div
      className={classNames({
        [className]: true,
        [wrapperClassName]: !!wrapperClassName,
      })}
      style={style}
    >
      <div className={`${className}--title`}>
        {isDetail && (
          <div className={`${className}--title--back`} onClick={goBack}>
            <XuiReactReturnIcon />
          </div>
        )}
        {title}
      </div>
      <div>{extra}</div>
    </div>
  );
};

export default XuiHeadLine;