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

import '../g.scss';

function LabelTitle(props: ILabelLabel) {
  const {
    title = 'label',
    attrKey,
    wrapStyle = { padding: '6px 20px 6px 20px' },
    change,
    deleteText,
    style
  } = props;

  const Redio = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        <div className="zl-large-screen-label-title-wrap">
          <span
            className="zl-large-screen-label-title"
            title={title}
            style={style}
          >
            {title}
          </span>
          {deleteText ? (
            <span
              className="zl-large-screen-label-del"
              onClick={() => change('delPic', attrKey)}
            >
              删除
            </span>
          ) : (
            <></>
          )}
        </div>
      </Wrap>
    );
  }, [title, deleteText]);

  return Redio;
}

export default LabelTitle;

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