import { useState } from "react";

const initialTasks = [
  { id: 1, title: "Learn React" },
  { id: 2, title: "Build something cool" },
];

function TaskList() {
  const [tasks, setTasks] = useState(initialTasks);

  async function handleAddTask(newTask) {
    const optimisticTasks = [...tasks, newTask];
    setTasks(optimisticTasks); // Cập nhật UI ngay lập tức

    try {
      await fakeApiAdd(newTask); // Gửi yêu cầu lên server
    } catch (err) {
      console.error("Failed to add task, reverting...");
      setTasks(tasks); // Rollback về trạng thái cũ nếu lỗi
    }
  }

  return (
    <div>
      <button onClick={() => handleAddTask({ id: Date.now(), title: "New Task" })}>
        Add Task
      </button>
      <ul>
        {tasks.map(task => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>
    </div>
  );
}

async function fakeApiAdd(task) {
  await new Promise((resolve) => setTimeout(resolve, 500));
  if (Math.random() < 0.2) throw new Error("Random API failure!"); // Giả lập lỗi 20%
}

export default TaskList;