import { useRef, createElement } from '__RAX_OR_REACT__';
import PropTypes from 'prop-types';
import { $emit } from '../../common/event';

import './index.scss';

export default function ConfigItem(props) {
  const { style, children, block = false, className = '' } = props;
  const itemRef = useRef(null);

  const handleClick = e => {
    $emit(itemRef.current, 'select');
    e.stopPropagation();
  };

  return (
    <div
      ref={itemRef}
      className={['config-item', className, block ? ' config-item-block' : '']
        .join(' ')
        .trim()}
      style={style}
      onClick={handleClick}
    >
      {children}
    </div>
  );
}
ConfigItem.propTypes = {
  style: PropTypes.object,
  children: PropTypes.any,
  block: PropTypes.bool,
  className: PropTypes.string,
};