import { useEffect, useState } from "react";
import TodoForm from "./components/TodoForm";
import TodoList from "./components/TodoList";
import "./App.css";

function App() {
    const [todos, setTodos] = useState([]);

    function addTodo(text, priority) {
        const newTodo = {
            id: crypto.randomUUID(),
            text,
            priority,
            completed: false,
        };
        setTodos((currentTodos) => [newTodo, ...currentTodos]);
    }

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

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

    return (
        <main className="app">
            <section className="todo-card">
                <header>
                    <p className="eyebrow">React-Schulungsprojekt</p>
                    <h1>Meine To-do-Liste</h1>
                    <p>
                        Aufgaben mit Komponenten, Props, State und API verwalten.
                    </p>
                </header>

                <TodoForm onAddTodo={addTodo} />

                <TodoList
                    todos={todos}
                    onToggleTodo={toggleTodo}
                    onDeleteTodo={deleteTodo}
                />
            </section>
        </main>
    );
}
export default App;