import React from 'react';
import ReactDOM from 'react-dom';

import { Provider, createAtom, useAtom } from 'use-atom';

const countAtom = createAtom({ default: 0 });

const Counter = () => {
  const [count, setCount] = useAtom(countAtom);
  return (
    <div>
      <span>Count: {count}</span>
      <button type="button" onClick={() => setCount(count + 1)}>+1</button>
      <button type="button" onClick={() => setCount((c) => c - 1)}>-1</button>
    </div>
  );
};

const App = () => (
  <Provider>
    <h1>Counter</h1>
    <Counter />
  </Provider>
);