var Cheatsheet = function (props) {
  var navigate = props.navigate;
  var _state = React.useState(null);
  var page = _state[0], setPage = _state[1];
  var _loading = React.useState(true);
  var loading = _loading[0], setLoading = _loading[1];

  React.useEffect(function () {
    var ghost = window.IBA_GHOST;
    if (!ghost) { setLoading(false); return; }

    ghost.getPage('ai-security-cheat-sheet').then(function (data) {
      if (data.pages && data.pages[0]) {
        setPage(data.pages[0]);
      }
      setLoading(false);
    }).catch(function () { setLoading(false); });
  }, []);

  if (loading) {
    return (
      <div className="ib-post-loading">
        <span style={{ color: 'var(--amber)' }}>$</span> loading cheat sheet...<br/>
        <span className="ib-caret"></span>
      </div>
    );
  }

  if (!page) {
    return (
      <div className="ib-post-page">
        <div className="ib-post-header">
          <h1 className="ib-post-header-title">AI Security Cheat Sheet</h1>
        </div>
        <div className="ib-post-body">
          <p>The cheat sheet is being loaded from Ghost. If you see this, the Ghost page may not be published yet.</p>
        </div>
      </div>
    );
  }

  return (
    <div className="ib-post-page">
      <div className="ib-post-header">
        {page.tags && page.tags[0] && (
          <span className="ib-post-header-tag">{page.tags[0].name}</span>
        )}
        <h1 className="ib-post-header-title">{page.title}</h1>
      </div>
      {page.feature_image && (
        <div className="ib-post-feature-image">
          <img src={page.feature_image} alt={page.feature_image_alt || page.title} />
        </div>
      )}
      <div className="ib-post-body" dangerouslySetInnerHTML={{ __html: page.html }}></div>
    </div>
  );
};

window.Cheatsheet = Cheatsheet;