/*
 * @Author: your name
 * @Date: 2021-12-17 14:41:42
 * @Description:
 * @FilePath: \zl-business\src\components\Unit\inputAndDel\index.tsx
 */
import React, { useMemo } from 'react';

import { Input } from 'antd';
import '../g.scss';

const { TextArea } = Input;

function HeaderTextarea(props: ITextareaData) {
  const {
    title = 'label',
    value = '',
    change,
    wrapStyle = { padding: '6px 20px 6px 20px' }
  } = props;

  const Redio = useMemo(() => {
    return (
      <div className="zl-large-screen-textarea-wrap" style={wrapStyle}>
        <span className="zl-large-screen-textarea-title">{title}</span>
        <div className="zl-large-screen-textarea">
          <TextArea
            autoSize={{ minRows: 5, maxRows: 5 }}
            value={value}
            onChange={(e) => change?.(e.target.value)}
          />
        </div>
      </div>
    );
  }, [value, title]);

  return Redio;
}

export default HeaderTextarea;

export interface ITextareaData {
  title?: string;
  value?: string;
  change?: Function;
  wrapStyle?: React.CSSProperties;
}