import React, { memo } from 'react';
import styles from './LayerOptionGroup.less';

function LayerOptionGroup({ id, level, selected, lock, name, onClick }) {
  const handleClick = () => {
    onClick(id);
  };

  return (
    <div className={styles.container} style={{ paddingLeft: 8 + level * 8 }} onClick={handleClick}>
      <i className={`${styles.icon} icon iconfont ${selected ? 'icon-icon_sucess' : lock ? 'icon-icon_lock' : ''}`} />
      <i className="icon iconfont icon-zu1" />
      <span>{name}</span>
    </div>
  );
}

export default memo(LayerOptionGroup);
