import { INode } from '../../../types/node';
import style from './Item.module.scss';
import  Botao  from '../../../components/Botao/';
import BotaoImagem from '../../BotaoImagem';
import editar from '../../../assets/img/editar.svg';
import Label from '../../Label';
interface Props extends INode {
  selecionaNode: (nodeSelecionada: INode) => void
}

export default function Item(
  {
    codigoAtividade,
    ordem,
    posicao,
    nomeAtividade,
    tipo,
    selecionado,
    pais,
    selecionaNode
  }: Props) {
  return (
    <li
      className={style.item}
      onClick={() => selecionaNode(
        {
          codigoAtividade,
          ordem,
          posicao,
          nomeAtividade,
          tipo,
          selecionado,
          pais
        }
        )}
      >

    <BotaoImagem tipo="editar">
    </BotaoImagem>
    <BotaoImagem tipo="excluir">
    </BotaoImagem>
    <BotaoImagem tipo="detalhar">
    </BotaoImagem>
    
      <h3>{codigoAtividade}</h3>     
      <span className={style.concluido} aria-label="node completad"></span>
    </li>
  
    )
}