// src/store.js
import { create } from "zustand";

export const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

// src/App.jsx
import { useCounterStore } from "./store";

function DisplayA() {
  const count = useCounterStore((state) => state.count);
  return <p>Display A sees: {count}</p>;
}

function ControlsB() {
  const increment = useCounterStore((state) => state.increment);
  const decrement = useCounterStore((state) => state.decrement);
  const reset = useCounterStore((state) => state.reset);

  return (
    <div>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

function App() {
  return (
    <div>
      <DisplayA />
      <ControlsB />
    </div>
  );
}

export default App;

/*
  Notes:
  - DisplayA and ControlsB never pass anything to each other as props
    and have no shared parent holding the count — both reach the same
    store directly via useCounterStore.
  - There is no <Provider> anywhere in App — the store exists entirely
    outside the component tree, unlike every Context example so far.
*/