import { FormUi } from "@common/business_components/ui";
import type { ControllerRenderProps, FieldError, FieldValues, Path } from "react-hook-form";
import { cloneElement, isValidElement } from "react";
interface AccessibleFormFieldProps<T extends FieldValues> {
  field: ControllerRenderProps<T, Path<T>>;
  label: string;
  required?: boolean;
  error?: FieldError;
  isDisabled?: boolean;
  inputComponent: React.ReactElement<{ disabled?: boolean }>;
}

export function AccessibleFormField<T extends FieldValues>({
  label,
  required = false,
  inputComponent,
  isDisabled = false,
}: AccessibleFormFieldProps<T>) {
  const labelText = required ? `${label} *` : label;
  
  return (
    <FormUi label={labelText} isDisabled={isDisabled}>
      <div>
      {isValidElement(inputComponent)
          ? cloneElement(inputComponent, { disabled: isDisabled } as Partial<typeof inputComponent.props>)
          : inputComponent}
        {/* {error?.message && Array.from(new Set(error.message.split('\n'))).map((msg, idx) => (
            <p key={idx} className="text-red-500 text-sm mt-1" role="alert">
                {msg}
            </p>
        ))} */}
      </div>
    </FormUi>
  );
}