/* eslint-disable import/prefer-default-export */
import { observer } from 'mobx-react-lite';
import type { ComponentType } from 'react';
import { useRowStatus } from 'stores/tables/payments/hooks';
import { usePaymentValue } from './hooks';

export function buildValueComponent<T>(index: number, Component: ComponentType<T>) {
  return observer((props: T) => {
    const [value, setValue] = usePaymentValue(index);
    const status = useRowStatus(index);

    return <Component value={value} setValue={setValue} status={status} {...props} />;
  });
}
