import { useStyleConfig, vui } from '../core'
import Icon, { IconProps } from '../icon'
import { cs } from '../utils'
import { inputColors } from './consts'
import { useInputContext } from './context'

/** Displays an icon within the Input. */
export const InputIcon = vui<'svg', IconProps>((props, ref) => {
  const { className, ...rest } = props
  const inputProps = useInputContext()
  const mergedProps = { ...inputProps, ...props }
  const styles = useStyleConfig('Input', mergedProps)

  const color = !mergedProps.disabled ? inputColors.icons : inputColors.placeholder

  return <Icon className={cs('vui-inputIcon', className)} color={color} ref={ref} {...styles.icon} {...rest} />
})

InputIcon.displayName = 'InputIcon'

export default InputIcon
