import React from 'react';
import Wrap from '../wrap/Wrap';

import { returnClass } from '../unit';

function LabelTexts(props: IProps) {
  const {
    title = 'lable',

    change,
    list = [],
    paddingSize = 'normal',

    wrapStyle = { padding: '6px 20px 6px 20px' }
  } = props;
  return (
    <Wrap wrapStyle={wrapStyle}>
      <div className={returnClass(paddingSize)}>{title}</div>
      <div className="zl-ls-texts">
        {Array.isArray(list) &&
          list?.length > 0 &&
          list?.map((item) => {
            return (
              <span
                key={item?.name}
                onClick={() => {
                  change(item?.key);
                }}
              >
                {item?.title}
              </span>
            );
          })}
      </div>
    </Wrap>
  );
}
export default LabelTexts;

export interface IProps {
  title: string;
  change: Function;
  list: IList;
  paddingSize: string;
  wrapStyle: React.CSSProperties;
}

export interface IList {
  key: string;
  title: string;
}