import React from 'react';
import AceEditorBox from '../AceEditorBox';
import styles from './data-response.less';

const DataResponse = ({ resultData }) => {
  return (
    <div className={styles.resData}>
      <div style={{ marginTop: 32, marginBottom: 16 }}>
        数据响应结果
        <span style={{ color: '#999999', fontSize: '12px' }}>（只读）</span>
      </div>
      <AceEditorBox
        className="dark"
        mode="json"
        theme="twilight"
        width="100%"
        height="400px"
        readOnly={true}
        name="responseData"
        tabSize={2}
        value={JSON.stringify(resultData, null, 2)}
        showGutter={true}
        editorProps={{ $blockScrolling: true }}
        setOptions={{ wrap: true }}
      />
    </div>
  );
};

export default DataResponse;
