import React from 'react';
import cn from 'classnames';
import { Icon } from 'UI';
import styles from './listItem.module.css';

const ListItem = ({ field, onEdit, disabled }) => {
    return (
        <div
            className={cn(styles.wrapper, field.index === 0 ? styles.preDefined : '', { [styles.disabled]: disabled })}
            onClick={() => field.index != 0 && onEdit(field)}
        >
            <span>{field.key}</span>
            <div className={styles.actions} data-hidden={field.index === 0}>
                {/* <div className={ styles.button } onClick={ (e) => { e.stopPropagation(); onDelete(field) } }>
          <Icon name="trash" color="teal" size="16" />
        </div> */}
                <div className={styles.button}>
                    <Icon name="edit" color="teal" size="18" />
                </div>
            </div>
        </div>
    );
};

export default ListItem;