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

function counterReducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    case "reset":
      return { count: 0 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>+1</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-1</button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
    </div>
  );
}

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

export default App;

/*
  Notes:
  - Each button only describes what happened (the action type) — none
    of them contain any logic about how the count should actually change.
  - The default case returns state unchanged, so dispatching an
    unrecognized action type never accidentally wipes out the state.
*/