import type { FC, HTMLAttributes, HTMLInputTypeAttribute, LegacyRef } from 'react';
import classnames from 'classnames';
import React from 'react';

export interface InputProps extends HTMLAttributes<HTMLInputElement> {
  innerRef?: LegacyRef<HTMLInputElement>;
  isInvalid?: boolean;
  size?: 'sm' | 'lg' | 'xl';
  type?: HTMLInputTypeAttribute;
}

const Input: FC<InputProps> = ({ className, innerRef, isInvalid = false, size, type = 'text', ...props }) => (
  <input
    ref={innerRef}
    type={type}
    className={classnames({ 'border-red': isInvalid }, 'form-control', size && `form-control-${size}`, className)}
    data-testid="Input"
    {...props}
  />
);

export default Input;