text: import './style.css';
  
  export function iconButton(name) {
    const node = document.createElement('button');
    node.classList.add('icon-button');
  
    const icon = document.createElement('span');
    icon.innerText = name;
    icon.classList.add('material-icons', 'icon');
  
    node.appendChild(icon);
    return node;
  }
  
  export function listItemComponent({ description, completed }) {
    const node = document.createElement('li');
    node.classList.add('todo');
  
    const checkbox = iconButton(completed ? 'done' : 'check_box_outline_blank');
    checkbox.classList.add('toggle');
    if (completed) {
      node.classList.add('todo-completed');
      checkbox.classList.add('todo-completed');
    }
    checkbox.addEventListener('click', () => {});
  
    const text = document.createElement('input');
    text.value = description;
    text.classList.add('edit');
    text.addEventListener('keyup', (event) => {
      if (event.key === 'Enter') {
        event.preventDefault();
        // console.log(event.target.value);
      }
    });
  
    const dragButton = iconButton('more_vert');
    dragButton.classList.add('drag-button', 'opacity-2');
    dragButton.addEventListener('mousedown', () => {});
  
    const deleteButton = iconButton('delete_outline');
    deleteButton.classList.add('opacity-5', 'hide');
    deleteButton.addEventListener('mousedown', () => {});
  
    node.appendChild(checkbox);
    node.appendChild(text);
    node.appendChild(deleteButton);
    node.appendChild(dragButton);
  
    const toggleButtons = () => {
      dragButton.classList.toggle('hide');
      deleteButton.classList.toggle('hide');
    };
  
    text.addEventListener('focus', toggleButtons);
    text.addEventListener('blur', () => {
      toggleButtons();
    });
  
    return node;
  }