import React from 'react';

let styles = {
  root: { backgroundColor: '#1f4662', color: '#fff', fontSize: '12px' },
  header: {
    backgroundColor: '#193549',
    padding: '5px 10px',
    fontFamily: 'monospace',
    color: '#ffc600',
  },
  pre: {
    display: 'block',
    padding: '10px 30px',
    margin: '0',
    overflow: 'scroll',
  },
};

export default function DebugPrint({ data }) {
  const [show, setShow] = React.useState(false);

  return (
    <div key={1} style={styles.root}>
      <div
        style={styles.header}
        onClick={() => {
          setShow(!show);
        }}
      >
        <strong>Debug</strong>
      </div>
      {show && <pre style={styles.pre}>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}
