text: import React from "react";
  import { TodoCounter } from "../TodoCounter";
  import { CreateTodoButton } from "../CreateTodoButton"
  import { TodoItem } from "../TodoItem";
  import { TodoList } from "../TodoList";
  import { TodoSearch } from "../TodoSearch";
  
  function AppUI(
        totalTodos,
        completedTodos,
        searchValue,
        setSearchValue,
        searchedTodos,
        completeTodo,
        deleteTodo,
  ) {
      return(
          <React.Fragment>
        <TodoCounter
          total={totalTodos}
          completed={completedTodos}
        />
        <TodoSearch
          searchValue = {searchValue}
          setSearchValue = {setSearchValue}
        />
        <TodoList>
          {searchedTodos.map(todo => (
            <TodoItem 
              key={todo.text} 
              text={todo.text} 
              completed={todo.completed}
              onComplete={() => completeTodo(todo.text)}
              onDelete={() => deleteTodo(todo.text)}
            />
          ))}
        </TodoList>
        <CreateTodoButton/>
      </React.Fragment>
      );
  }
  
  export {AppUI};