/* Numbered editorial capability row. */

function CapabilityCard({ n, title, desc, tags, onOpen }) {
  return (
    <a className="cap-row" onClick={(e) => { e.preventDefault(); onOpen && onOpen(); }} href="#">
      <div className="cap-row__num">0{n}</div>
      <div>
        <h3 className="cap-row__title">{title}</h3>
        <p className="cap-row__desc">{desc}</p>
        {tags && tags.length > 0 && (
          <div className="cap-row__meta">
            {tags.map((t) => <span className="tag" key={t}>{t}</span>)}
          </div>
        )}
      </div>
    </a>
  );
}

function SignedNote({ date, title, byline, role }) {
  return (
    <a className="note" href="#" onClick={(e) => e.preventDefault()}>
      <div className="note__date">{date}</div>
      <h3 className="note__title">{title}</h3>
      <div className="note__byline">A note from <strong>{byline}</strong>, {role}.</div>
    </a>
  );
}

Object.assign(window, { CapabilityCard, SignedNote });