import { forwardRef, useRef } from 'react';

interface InputProps {
  value: string;
  onChange: (value: string) => void;
  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
  placeholder?: string;
  disabled?: boolean;
  className?: string;
}

export const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ value, onChange, onKeyDown, placeholder, disabled, className = '' }, ref) => {
    const innerRef = useRef<HTMLInputElement>(null);
    const combinedRef = ref || innerRef;

    return (
      <input
        ref={combinedRef}
        type="text"
        className={`search-input ${className}`}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        onKeyDown={onKeyDown}
        placeholder={placeholder}
        disabled={disabled}
      />
    );
  },
);

Input.displayName = 'Input';