importReact,{ReactElement}from'react'importTodofrom'../../interfaces/todo.interface'importTodoListItemfrom'../TodoListItem'importstylefrom'./todo-list.scss'interfaceListProps{todos:Todo[]addTodo:FunctionsaveTodo:FunctionremoveTodo:FunctionisLoading:boolean}constTodoList=({    todos,    addTodo,    saveTodo,    removeTodo,    isLoading,}:ListProps):ReactElement<{}>=>{constcreateNewId=():number=>{if(!todos.length){return0}constids=todos.map(todo=>todo.id)consthighestId=Math.max(...ids)returnhighestId+1}constaddNewTodo=():void=>{constid=createNewId()addTodo(id)}consttodoElements=todos.map(todo=>(<likey={todo.id}className={style['list-element']}><TodoListItemtodo={todo}saveTodo={saveTodo}removeTodo={removeTodo}isLoading={isLoading}/></li>))return(<divclassName="container"><h1>TodoList</h1><ulclassName={style.list}>{todoElements}</ul><buttontype="button"className={style['add-todo-btn']}title="Add Todo"onClick={addNewTodo}disabled={isLoading}>+</button></div>)}exportdefaultTodoList