/* eslint-env browser */

import React, { useState, StrictMode } from "react";
import ReactDOM from "react-dom";

import { Provider, useTracked } from "react-tracked";
import produce from "immer";

const useValue = () =>
  useState({
    count: 0
});

const Counter = () => {
  const [state, setState] = useTracked();
  const increment = () => {
    setState(
      produce(draft => {
        draft.count += 1;
      })
    );
  };
  const decrement = () => {
    setState(
      produce(draft => {
        draft.count -= 1;
      })
    );
  };
  return (
    <div>
      <div>Count: {state.count}</div>
      <button type="button" onClick={increment}>+</button>
      <button type="button" onClick={decrement}>-</button>
    </div>
  );
};

const App = () => (
  <StrictMode>
    <Provider useValue={useValue}>
      <Counter />
    </Provider>
  </StrictMode>
);

ReactDOM.unstable_createRoot(document.getElementById("app")).render(<App />);