import React, {forwardRef} from 'react'
import {
  FileDrop as InstUIFileDrop,
  FileDropProps as InstUIFileDropProps,
} from '@instructure/ui-file-drop'
import {enhanceErrorMessages} from '../../util/enhanceErrorMessages'

export interface FileDropProps extends InstUIFileDropProps {}

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

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

FileDrop.displayName = 'FileDrop'