/*
 * @Author: your name
 * @Date: 2021-12-17 10:42:24
 * @Description:
 * @FilePath: \zl-business\src\components\Unit\button\index.tsx
 */

import React, { useMemo } from 'react';

import Wrap from '../wrap/Wrap';
import Icon from '../../Icon/index';

import { Button } from 'antd';

import '../g.scss';

function AddLineName(props: IButtonAdd) {
  const {
    title = '',
    change,
    wrapStyle = { padding: '6px 20px 6px 20px' }
  } = props;

  const Dom = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        <div className="zl-large-screen-setting-unit-content">
          <Button size="small" block={true} onClick={() => change?.('add')}>
            <Icon name="icon-add" style={{ marginRight: '10px' }} />
            {title}
          </Button>
        </div>
      </Wrap>
    );
  }, [title]);

  return Dom;
}

export default AddLineName;

export interface IButtonAdd {
  title?: string | number;
  change?: Function;
  wrapStyle?: React.CSSProperties;
}