import React from 'react'

const TodoItem = ({ todoId, children, complete, onEdit, onComplete }) => {

  const className = `todos ${complete ? 't-complete' : ''}`

  return (
    <div className="task">
      <div className="task-body-content">
        <div style={{ display: 'flex' }}>
          <input type='checkbox' defaultChecked={complete} onChange={() => onComplete(todoId, complete)}></input>
          <span style={{ cursor: 'pointer' }} className={className} onClick={() => onEdit(todoId, children)}>{children}</span>
        </div>
      </div>
    </div >
  )
}

export default TodoItem