import React, {forwardRef} from 'react'
import {
  TextInput as InstUITextInput,
  type TextInputProps as InstUITextInputProps,
} from '@instructure/ui-text-input'
import {enhanceErrorMessages} from '../../util/enhanceErrorMessages'

export interface TextInputProps extends InstUITextInputProps {}

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

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

TextInput.displayName = 'TextInput'