// src/App.jsx
import { useReducer } from "react";

function todosReducer(state, action) {
  switch (action.type) {
    case "add":
      return [...state, { id: action.payload.id, text: action.payload.text, done: false }];
    case "toggle":
      return state.map((todo) =>
        todo.id === action.payload.id ? { ...todo, done: !todo.done } : todo
      );
    case "remove":
      return state.filter((todo) => todo.id !== action.payload.id);
    default:
      return state;
  }
}

function TodoList() {
  const [todos, dispatch] = useReducer(todosReducer, []);

  function handleAdd(text) {
    dispatch({ type: "add", payload: { id: Date.now(), text } });
  }

  return (
    <div>
      <button onClick={() => handleAdd("New todo")}>Add todo</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id} style={{ textDecoration: todo.done ? "line-through" : "none" }}>
            {todo.text}
            <button onClick={() => dispatch({ type: "toggle", payload: { id: todo.id } })}>
              Toggle
            </button>
            <button onClick={() => dispatch({ type: "remove", payload: { id: todo.id } })}>
              Delete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

function App() {
  return <TodoList />;
}

export default App;

/*
  Notes:
  - All three transitions (add/toggle/remove) live in todosReducer
    instead of being split across separate handler functions, each
    one still building a new array rather than mutating the existing
    todos array directly.
  - payload carries exactly what each action needs — the new todo's
    id/text for "add," just an id for "toggle" and "remove."
*/