/* global React */

function HealthArticleCard({ article, rank, tag, time, read }) {
  const isPublished = article && article.status === "published";
  const href = article?.slug || "#";
  const title = isPublished ? (article.title || article.meta_title || "How-to guide") : null;
  const description = isPublished ? (article.meta_description || "") : "";

  return (
    <a className={`scard ${isPublished ? "" : "hub-card-stub"}`} href={isPublished ? href : href} aria-disabled={!isPublished}>
      <div className="s-top">
        <span className="num">{rank}</span>
        <span>{tag || "Guide"}</span>
      </div>
      {isPublished ? (
        <React.Fragment>
          <h4>{title}</h4>
          <p>{description}</p>
        </React.Fragment>
      ) : (
        <React.Fragment>
          <div className="hub-skel-line title" />
          <div className="hub-stub-label">Coming Soon</div>
          <div className="hub-skel-line" />
          <div className="hub-skel-line short" />
        </React.Fragment>
      )}
      <div className="s-foot">
        <span>{isPublished ? `${time || "Guide"} - ${read || "Guide"}` : "Queued for Iris"}</span>
        <span className="arr">{isPublished ? "Read" : ""}</span>
      </div>
    </a>
  );
}

window.HealthArticleCard = HealthArticleCard;