// 10x Newsletter - Issue rendering (used inline on Home + on Issue Detail page)

function IssueMasthead({ issue, compact = false }) {
  const count = issue.items.length;
  const label = issue.title || `Issue ${String(issue.number).padStart(2, "0")}`;
  return (
    <div className={"nl-issue-masthead" + (compact ? " is-compact" : "")}>
      <h2 className="nl-issue-theme">{label}</h2>
      <div className="nl-issue-meta">
        <time dateTime={issue.iso}>{issue.date}</time>
        <span className="nl-issue-sep">&middot;</span>
        <span>{count} {count === 1 ? "link" : "links"}</span>
      </div>
    </div>
  );
}

function IssueArticle({ item, index }) {
  const hasTime = Boolean(item.time);
  const href = item.url || "#";
  return (
    <article className="nl-article">
      <div className="nl-article-head">
        <span className="nl-article-index">{String(index + 1).padStart(2, "0")}</span>
      </div>
      <h3 className="nl-article-title">
        <a href={href} target="_blank" rel="noopener noreferrer">
          {item.title}
          <span className="nl-article-ext" aria-hidden="true">↗</span>
        </a>
      </h3>
      <div className="nl-article-meta">
        <span>{item.source}</span>
        {hasTime && (
          <React.Fragment>
            <span className="nl-issue-sep">&middot;</span>
            <span>{item.time} read</span>
          </React.Fragment>
        )}
      </div>
      <p className="nl-article-note">{item.note}</p>
    </article>
  );
}

function IssueBody({ issue, showCloser = true, className = "" }) {
  const cls = ["nl-issue-body", className].filter(Boolean).join(" ");
  return (
    <div className={cls}>
      {issue.items.map((it, i) => (
        <IssueArticle key={i} item={it} index={i} />
      ))}
      {showCloser && (
        <div className="nl-issue-closer">That's it for this issue.</div>
      )}
    </div>
  );
}

window.IssueMasthead = IssueMasthead;
window.IssueArticle = IssueArticle;
window.IssueBody = IssueBody;