import React, { useMemo } from 'react';
import Wrap from '../wrap/Wrap';

import '../g.scss';

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

  const Redio = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        <div className="zl-large-screen-text">
          <span
            className="zl-large-screen-label-title"
            title={title}
            onClick={()=>change()}
          >
            {title}
          </span>
        </div>
      </Wrap>
    );
  }, [title]);

  return Redio;
}

export default Text;

export interface IText {
  title: string;
  attrKey: string;
  paddingSize?: string;
  wrapStyle?: React.CSSProperties;
  change?: Function;
  deleteText?: string;
}