function TodoItem({ todo, onToggleTodo, onDeleteTodo }) {

    const priorityLabels = {
        low: "Niedrig",
        normal: "Normal",
        high: "Hoch",
    };

    return (
        <li className={`todo-item ${todo.completed ? "completed" : ""}`}>
            <label className="todo-content">
                <input
                    type="checkbox"
                    checked={todo.completed}
                    onChange={() => onToggleTodo(todo.id)}
                />
                <span className="todo-text">{todo.text}</span>
            </label>

            <span className={`priority priority-${todo.priority}`}>
                {priorityLabels[todo.priority]}
            </span>

            <button
                className="delete-button"
                type="button"
                onClick={() => onDeleteTodo(todo.id)}
                aria-label={`Aufgabe ${todo.text} löschen`}
            >
                Löschen
            </button>
        </li>
    );
}
export default TodoItem;