import React, {forwardRef} from 'react'
import {
  FormFieldGroup as InstUIFormFieldGroup,
  type FormFieldGroupProps as InstUIFormFieldGroupProps,
} from '@instructure/ui-form-field'
import {enhanceErrorMessages} from '../../util/enhanceErrorMessages'

export interface FormFieldGroupProps extends InstUIFormFieldGroupProps {}

/**
 * This is a wrapper around the InstUI `FormFieldGroup` component.
 *
 * Differences include:
 * - If the `messages` prop contains an error message, it will include an icon
 */
export const FormFieldGroup = forwardRef<InstUIFormFieldGroup, FormFieldGroupProps>(
  ({messages, ...props}, ref) => {
    const messagesWithEnhancedErrors = enhanceErrorMessages(messages)

    return <InstUIFormFieldGroup {...props} ref={ref} messages={messagesWithEnhancedErrors} />
  },
)

FormFieldGroup.displayName = 'FormFieldGroup'