import React, { memo } from 'react';
import classNames from 'classnames';
import styles from './LayerControl.less';

export default memo(function LayerControl({
  id,
  show,
  selected,
  onShow
}: {
  id: string | number;
  show: boolean;
  selected: boolean;
  onShow: (param) => any;
}) {
  const handleClick = (e) => {
    e.stopPropagation();
    onShow([{ id, key: 'show', value: !show }]);
  };

  return (
    <span className={classNames(styles.showIcon, { [styles.show]: show }, { [styles.selected]: selected })} onClick={handleClick}>
      {show && <i className="icon iconfont icon-btn_eyesopen" />}
    </span>
  );
});
