import React from "react";
import { CgCloseO } from "react-icons/cg";

const TodoItem = ({
  todos,
  completeTodo,
  removeTodo,
  editTodo,
  editId,
  handleEditChange,
  inputValue,
  setInputValue
}) => {
  return todos.map((todo) => (
    <div className="task">
      {editId === todo.id ? (
        <div className="add-form">
          <div className='form-control'>
            <input
              type="text"
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
            />
          </div>
          <button className="btn" onClick={() => editTodo(todo.id, inputValue)}>Save</button>
        </div>
      ) : (
        <>
          {/* New Todos Section */}
          {todo.status === false ? (
            < div className="task-body-content">
              <div style={{ display: 'flex' }}>
                <div style={{ margin: '2px 4px 0px 0px' }}>
                  <input type='checkbox'
                    key={todo.id}
                    checked={todo.status}
                    onClick={() => completeTodo(todo.id)}
                  ></input>
                </div>
                <div onClick={() => handleEditChange(todo.id, todo.text)} style={{ cursor: 'pointer' }}>{todo.text}</div>
              </div>

              <div>
                <CgCloseO onClick={() => removeTodo(todo.id)} style={{ fontSize: '18px', cursor: 'pointer', color: '#ccc' }} />
              </div>
            </div>
          ) : ''}
        </>
      )}
    </div >
  ));
};

export default TodoItem;