import { FormUi } from "@common/business_components/ui";
import type { ReactNode } from "react";
import type { ControllerRenderProps, FieldError, FieldValues, Path } from "react-hook-form";


interface AccessibleFormFieldProps<T extends FieldValues> {
  field: ControllerRenderProps<T, Path<T>>;
  label: string;
  required?: boolean;
  error?: FieldError;
  inputComponent: ReactNode;
}

export function AccessibleFormField<T extends FieldValues>({
  label,
  required = false,
  error,
  inputComponent,
}: AccessibleFormFieldProps<T>) {
  const labelText = required ? `${label} *` : label;
  
  return (
    <FormUi label={labelText}>
      <div>
        {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>
  );
}