import React, { useMemo } from 'react';

import Wrap from '../wrap/Wrap';
import '../g.scss';

function LabelClick(props: ILabelClick) {
  const {
    clickValue='',
    numberValue='',
    change,
    wrapStyle = { padding: '6px 20px 6px 20px' }
  } = props;

  const Redio = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        <div className="zl-large-screen-click-lable">
          <span
            onClick={() => change?.(clickValue)}
            className="zl-large-screen-click-lable-click"
          >
            {clickValue}
          </span>
          {numberValue ? (
            <span className="zl-large-screen-click-lable-num">
              {numberValue}
            </span>
          ) : (
            <></>
          )}
        </div>
      </Wrap>
    );
  }, [clickValue, numberValue]);

  return Redio;
}

export default LabelClick;

export interface ILabelClick {
  clickValue?: string;
  numberValue?: string;
  change?: Function;
  wrapStyle?: React.CSSProperties;
}