content: 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>
    )
  }
  