import { Controller } from 'react-hook-form';

import { type FormApprovalStepsListProps } from './types';
import ApprovalStepsList from '.';

export const FormApprovalStepsList = ({
  rules,
  name,
  approvalStepDrawerProps,
  cardProps,
  isLoadingSteps,
  maxApprovalSteps,
}: FormApprovalStepsListProps) => (
  <Controller
    name={name}
    rules={rules}
    render={({ field, fieldState: { error } }) => (
      <ApprovalStepsList
        approvalUsers={field.value}
        setApprovalUsers={field.onChange}
        maxApprovalSteps={maxApprovalSteps}
        error={error?.message}
        approvalStepDrawerProps={approvalStepDrawerProps}
        cardProps={cardProps}
        isLoadingSteps={isLoadingSteps}
      />
    )}
  />
);