import React, { useState } from "react";
import Todo from "./Todo";

type TodoListProps = {
 todos: Todo[];
};

const TodoList: React.FC<TodoListProps> = ({ todos }) => {
 const [todos, setTodos] = useState([]);

 const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const formData = new FormData(event.target as HTMLFormElement);
    const text = formData.get("text") as string;
    setTodos([...todos, { id: todos.length + 1, text, completed: false }]);
 };

 return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="text" name="text" placeholder="Add a todo" />
        <button type="submit">Add</button>
      </form>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <Todo {...todo} />
          </li>
        ))}
      </ul>
    </div>
 );
};

export default TodoList;