import React, { useState } from 'react';

const ToDoChartComponent = () => {
  const [todo, setTodo] = useState('');
  const [todoList, setTodoList] = useState(['todo 1']);

  const addTodo = (newTodo) => {
    if (newTodo.trim()) {
      setTodoList([...todoList, newTodo]);
      setTodo('');
    }
  };

  const removeTodo = (index) => {
    // Don't allow removing the first item ('todo 1')
    if (index === 0) return;
    
    const updatedTodoList = todoList.filter((_, i) => i !== index);
    setTodoList(updatedTodoList);
  };

  return (
    <div style={{ padding: '15px' }}>
      <table className="table" style={{ width: '100%' }}>
        <thead>
          <tr>
            <th style={{ width: '10%' }}>#</th>
            <th style={{ width: '70%' }}>Item</th>
            <th style={{ width: '20%', textAlign: 'right' }}>Action</th>
          </tr>
        </thead>
        <tbody>
          {todoList.map((todoItem, index) => (
            <tr key={index}>
              <td>{index + 1}</td>
              <td>{todoItem}</td>
              <td style={{ textAlign: 'right' }}>
                {index !== 0 && ( // Don't show delete button for the first item
                  <button
                    onClick={() => removeTodo(index)}
                    style={{ 
                      background: 'none', 
                      border: 'none',
                      cursor: 'pointer',
                      color: '#ff4444'
                    }}
                    title="Remove item"
                  >
                    ×
                  </button>
                )}
              </td>
            </tr>
          ))}
          <tr>
            <td></td>
            <td>
              <input
                value={todo}
                onChange={(e) => setTodo(e.target.value)}
                placeholder="Add new todo"
                style={{
                  width: '100%',
                  padding: '8px',
                  border: '1px solid #ddd',
                  borderRadius: '4px'
                }}
              />
            </td>
            <td style={{ textAlign: 'right' }}>
              <button
                onClick={() => addTodo(todo)}
                style={{ 
                  background: 'none', 
                  border: 'none',
                  cursor: 'pointer',
                  color: '#4CAF50',
                  fontSize: '1.2em'
                }}
                title="Add item"
                disabled={!todo.trim()}
              >
                +
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
};

export default ToDoChartComponent;