import React from 'react';
import { Button } from 'antd';
import IconFont from '../../../themeComponents/IconFont';
import SearchInput from '../../../components/SearchInput';
import BetweenBox from '../../../themeComponents/BetweenBox';
import AuthComponent from '../../AuthComponent';
function TableBetweenBox(props) {
  const { onClick, btnIcon, btnText, onChange, inputDefaultValue, placeholder, renderLeft = null, renderRight = null, hasSearch = true, actionName,SearchStyle } = props;
  const AuthView = ({ children }) => {
    return actionName ? <AuthComponent actionName={actionName}>{children}</AuthComponent> : <>{children}</>;
  };
  return (
    <BetweenBox
      left={
        <div>
          {btnText && (
            <AuthView>
              <Button type="primary" onClick={onClick}>
                <IconFont type={btnIcon} />
                {btnText}
              </Button>
            </AuthView>
          )}
          {renderLeft}
        </div>
      }
      right={
        <div>
          {renderRight}
          {hasSearch && <SearchInput style={Object.assign({ width: 252, marginRight: 2 },SearchStyle)} onChange={onChange} isEnterKey={true} value={inputDefaultValue} placeholder={placeholder} />}
        </div>
      }
    />
  );
}
export default TableBetweenBox;
