import React, { useState } from 'react';

const ToDoChartComponent = () => {
  // State to store todo list and current todo input value
  const [todo, setTodo] = useState('');
  const [todoList, setTodoList] = useState(['todo 1']);

  // Add a new todo to the list
  const addTodo = (newTodo) => {
    if (newTodo.trim()) {
      setTodoList([...todoList, newTodo]);
      setTodo(''); // Clear the input field after adding
    }
  };

  // Remove a todo from the list by index
  const removeTodo = (index) => {
    const updatedTodoList = todoList.filter((_, i) => i !== index);
    setTodoList(updatedTodoList);
  };

  return (
    <table className="table">
      <thead>
        <tr>
          <th className="c-col">#</th>
          <th>Item</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {todoList.map((todoItem, index) => (
          <tr className="ui basic segment" key={index}>
            <td className="c-col">{index + 1}</td>
            <td>{todoItem}</td>
            <td style={{ textAlign: 'right' }}>
              <button
                onClick={() => removeTodo(index)}
                style={{ background: 'none', border: 'none' }}
              >
                <i className="clr-icon times"></i>
              </button>
            </td>
          </tr>
        ))}
        <tr>
          <td></td>
          <td>
            <input
              value={todo}
              onChange={(e) => setTodo(e.target.value)}
              placeholder="Add Todo"
              className="clr-input"
            />
          </td>
          <td style={{ textAlign: 'right' }}>
            <button
              onClick={() => addTodo(todo)}
              style={{ background: 'none', border: 'none' }}
            >
              <i className="clr-icon plus"></i>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  );
};

export default ToDoChartComponent;
