import React from 'react';
import PropTypes from 'prop-types';
import styles from './FilterItem.less';

const FilterItem = ({
                      label = '',
                      children,
                    }) => {
  const labelArray = label.split('');
  return (
    <div className={styles.filterItem}>
      {labelArray.length > 0
        ? <div className={styles.labelWrap}>
          {labelArray.map((item, index) => <span className="labelText" key={index}>{item}</span>)}
        </div>
        : ''}
      <div className={styles.item}>
        {children}
      </div>
    </div>
  );
};

FilterItem.propTypes = {
  label: PropTypes.string,
  children: PropTypes.element.isRequired,
};

export default FilterItem;
