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

import '../g.scss';

function ClickTextButton(props: IClickTextButton) {
  const {
    title = 'label',
    wrapStyle = { padding: '6px 20px 6px 20px' },
    change,
    value
  } = 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}>
            {title}
          </span>
            <span
              className="zl-large-screen-label-del"
              onClick={() => change('changeCurrentVideo',value)}
            >
              {value}
            </span>
          
        </div>
      </Wrap>
    );
  }, [title, value]);

  return Redio;
}

export default ClickTextButton;

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