import React, { forwardRef } from 'react';
import Input, { InputRef } from 'antd/es/input';

type InputProps = {
  inputType?: 'default' | 'search' | 'password' | 'otp';
  size?: 'large' | 'middle' | 'small';
  prefix?: React.ReactNode;
  placeholder?: string;
  value?: string;
  allowClear?: boolean;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onSearch?: (value: string) => void;
  disabled?: boolean;
};

const { Search, Password } = Input;

const AppInput = forwardRef<InputRef, InputProps>(({
  placeholder = 'Enter text',
  onChange,
  value,
  allowClear = false,
  inputType = 'default',
  size = 'middle',
  prefix,
  onSearch,
  disabled = false,
  ...props
}, ref) => {
  const inputProps = {
    placeholder,
    onChange,
    value,
    allowClear,
    size,
    prefix,
    disabled,
    ...props,
  };

  switch (inputType) {
    case 'search':
      return <Search ref={ref} {...inputProps} onSearch={onSearch} />;
    case 'password':
      return <Password ref={ref} {...inputProps} />;
    case 'otp':
      return <Input ref={ref} {...inputProps} maxLength={6} />;
    default:
      return <Input ref={ref} {...inputProps} />;
  }
});

AppInput.displayName = 'AppInput';

export default AppInput;