import { Send } from 'lucide-react';

/**
 * Chat Input component with send button
 *
 * @param {string} value - Input value
 * @param {function} onChange - Change handler for input
 * @param {function} onSubmit - Submit handler for form
 * @param {boolean} disabled - Whether input is disabled (e.g., when not connected)
 * @param {string} placeholder - Placeholder text (default: "Write a message...")
 * @param {string} className - Additional classes for the form
 * @param {boolean} autoFocus - Whether to autofocus the input
 */
const ChatInput = ({
  value,
  onChange,
  onSubmit,
  disabled = false,
  placeholder = 'Write a message...',
  className = '',
  autoFocus = false
}) => {
  const handleSubmit = (e) => {
    e.preventDefault();
    if (!value.trim() || disabled) return;
    onSubmit(e);
  };

  return (
    <form onSubmit={handleSubmit} className={`flex space-x-2 ${className}`}>
      <input
        type="text"
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        disabled={disabled}
        autoFocus={autoFocus}
        className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50 disabled:cursor-not-allowed"
      />
      <button
        type="submit"
        disabled={disabled || !value.trim()}
        className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
        aria-label="Send message"
      >
        <Send className="w-5 h-5" />
      </button>
    </form>
  );
};

export default ChatInput;