/* @jsx React.createElement */
const { useState } = React;

function GtmosAvatar() {
  return (
    <div className="avatar">
      <span className="a-fg">/</span>
    </div>
  );
}

// One Slack post wrapper: avatar column + meta + the GTM OS rich block
function Post({ ts, children }) {
  return (
    <div className="post">
      <GtmosAvatar />
      <div>
        <div className="meta">
          <span className="who">GTM OS</span>
          <span className="app">app</span>
          <span className="ts">{ts}</span>
        </div>
        {children}
      </div>
    </div>
  );
}

// The block GTM OS posts — header / hero / body / footer scaffold
function GtmosBlock({ headerLabel, headerType, date, hero, body, footerType, version = "v1.0" }) {
  return (
    <div className="gtmos-block">
      <div className="header">
        <div className="label">
          {headerLabel}<span className="am">·</span>{headerType}
        </div>
        <div className="date">{date}</div>
      </div>
      <div className="hero">
        <div
          className={"num" + (hero.amber ? " amber" : "")}
          style={hero.size ? { fontSize: hero.size + "px", lineHeight: 0.95 } : null}
        >{hero.value}</div>
        <div className="ctx" dangerouslySetInnerHTML={{ __html: hero.ctx }} />
      </div>
      <div className="body">{body}</div>
      <div className="footer">
        <span className="mark">gtm<span className="am">/</span>os <span style={{margin:'0 6px',color:'#3a3a44'}}>·</span> {footerType}</span>
        <span>{version}</span>
      </div>
    </div>
  );
}

window.Post = Post;
window.GtmosBlock = GtmosBlock;