import {useState} from "react";

export default function App() {
    const [input, setInput] = useState("");
    const [todos, setTodos] = useState([]);

    function addTodo() {
        if (input.trim() === "") return;
        setTodos([...todos, {id: Date.now(), text: input, erledigt: false}]);
        setInput("");
    }

    function deleteTodo(id) {
        setTodos(todos.filter((todo) => todo.id !== id));
    }

    function toggleTodo(id) {
        setTodos(todos.map((todo) =>
            todo.id === id ? {...todo, erledigt: !todo.erledigt} : todo
        ));
    }

    return (
        <div className="container schatten-farbverlauf">
            <div className="aufgaben-app">
                <h2>Aufgabenliste</h2>
                <div className="input-container">
                    <input type="text" onChange={(e) => setInput(e.target.value)} placeholder="Neue Aufgabe eintragen..."/>
                    <button onClick={() => addTodo()}>Hinzufügen</button>
                </div>
                <ul id="todo-list-container">
                    {todos.map((todo) => (
                        <li>
                            <span onClick={() => toggleTodo(todo.id)}>
                                {todo.text}: {todo.erledigt ? "bereits " : "noch nicht "} erledigt
                            </span>
                            <button onClick={() => deleteTodo(todo.id)}>Entfernen</button>
                        </li>))}
                </ul>
            </div>
        </div>
    );
}