import ImageUpload from './ImageUpload'

export default function ChatInput({
  input,
  setInput,
  uploadedImage,
  setUploadedImage,
  onImageUpload,
  onSubmit,
  onKeyPress,
  isLoading,
}) {
  return (
    <div className="border-t border-gray-200 p-4 bg-white">
      <div className="flex items-end space-x-2">
        <ImageUpload
          onImageUpload={onImageUpload}
          uploadedImage={uploadedImage}
          onRemove={() => setUploadedImage(null)}
        />
        <div className="flex-1">
          <textarea
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={onKeyPress}
            placeholder={uploadedImage ? "Ask a question about the image..." : "Type your message..."}
            rows={1}
            className="w-full resize-none rounded-lg border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            disabled={isLoading}
          />
        </div>
        <button
          onClick={onSubmit}
          disabled={isLoading || (!input.trim() && !uploadedImage)}
          className={`px-4 py-2 rounded-lg font-medium transition-colors ${
            isLoading || (!input.trim() && !uploadedImage)
              ? 'bg-gray-300 text-gray-500 cursor-not-allowed'
              : 'bg-blue-600 text-white hover:bg-blue-700'
          }`}
          aria-label="Send message"
        >
          {isLoading ? '⏳' : 'Send'}
        </button>
      </div>
      <p className="text-xs text-gray-500 mt-2">
        Press Enter to send • Shift+Enter for new line
      </p>
    </div>
  )
}