import React, {useState} from 'react';
import Task from '../components/Task';

const TodoList = () => {
 const [tasks, setTasks] = useState([]);

 const addTask = (task) => {
    setTasks([...tasks, task]);
 };

 const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      addTask(e.target.value);
      e.target.value = '';
    }
 };

 return (
    <section className="">
      <h2 className="text-xl">Todo List</h2>
      <div className="mt-4">
        <input
          type="text"
          className="w-full h-full p-2"
          placeholder="Add a task..."
          onKeyDown={handleKeyDown}
        />
      </div>
      <ul className="mt-4">
        {tasks.map((task, index) => (
          <li key={index}>
            <Task task={task} />
          </li>
        ))}
      </ul>
    </section>
 );
};

export default TodoList;