import React, { memo } from 'react';
import Thumb from 'components/Thumb';
import styles from './LayerOptionItem.less';
import {getAssetsUrl} from 'utils/utils';

function LayerOptionItem({ id, level, selected, lock, thumb, 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' : ''}`} />
      <Thumb className={styles.thumb} src={thumb ? getAssetsUrl(`${thumb}`) : undefined} />
      <span>{name}</span>
    </div>
  );
}

export default memo(LayerOptionItem);
