import * as React from 'react';
import {useControl} from 'react-use-control';

export default function Counter({step: s, count}) {
  const [step, setStep] = useControl(s, 1);
  const [num, setNum] = useControl(count, 0);

  return (
    <div>
      <span> {num} </span>
      <button onClick={() => setNum((n) => n + step)}>add {step}</button>
      <button onClick={() => setStep((n) => n + 1)}>add step</button>
    </div>
  );
}

export default function App({count}) {
  const [, setNum, control] = useControl(count, 1);

  return (
    <div>
      <Counter count={control} />
      <button onClick={() => setNum(1)}>Reset</button>
    </div>
  );
}