import { observer } from 'mobx-react-lite';
import { useComputedValue } from 'client/hooks/Calculation/useValue';
import { useStatus } from 'client/hooks/Calculation/useStatus';

export default Component => ({
  name,
  computedValueName,
  validation,
  ...props
}) =>
  observer(() => {
    const { value } = useComputedValue({
      computedValueName,
    });
    const { status } = useStatus(name);
    return <Component value={value} status={status} {...props} />;
  });