import React, { useMemo } from 'react';
import Wrap from '../wrap/Wrap';
import Icon from '../../Icon/index';
import { returnClass } from '../unit';

import '../g.scss';

function LabelLabel(props: ILabelLabel) {
  const {
    title = 'label',
    size = 'lager',
    value='',
    paddingSize = 'normal',
    iconName,
    wrapStyle = { padding: '6px 20px 6px 20px' }
  } = props;

  const Redio = useMemo(() => {
    return (
      <Wrap wrapStyle={wrapStyle}>
        <div className={returnClass(paddingSize)}>{title}</div>
        <div
          className={
            size === 'normal'
              ? 'zl-large-screen-setting-unit-content'
              : 'zl-large-screen-setting-unit-content-large'
          }
        >
          <span>
            <Icon name={iconName} style={{ marginRight: '4px' }} />
            <span>{value}</span>
          </span>
        </div>
      </Wrap>
    );
  }, [value, iconName, title]);

  return Redio;
}

export default LabelLabel;

export interface ILabelLabel {
  title: string | number;
  change: Function;
  size: string;
  value?: string | number;
  paddingSize?: string;
  iconName?: string;
  wrapStyle?: React.CSSProperties;
}