// ArticleCard.jsx
function ArticleCard({ article, onOpen, featured = false, density = 'comfortable' }) {
  if (featured) {
    return (
      <article className="im-card-featured" onClick={() => onOpen?.(article)}>
        <div
          className="im-card-featured-visual"
          style={{ background: `linear-gradient(135deg, var(--im-navy) 0%, ${article.accent} 100%)` }}
        >
          {article.coverUrl && (
            <img className="im-card-cover-img" src={article.coverUrl} alt={article.title} loading="lazy" />
          )}
          <span className="im-card-featured-kicker">{article.category}</span>
          {!article.coverUrl && (
            <div className="im-card-featured-mark" aria-hidden="true">
              <span className="im-hero-i">i</span><span className="im-hero-m">M</span>
            </div>
          )}
        </div>
        <div className="im-card-featured-body">
          <span className="im-eyebrow">{article.category} · {article.readTime}</span>
          <h2 className="im-card-featured-title">{article.title}</h2>
          <p className="im-card-featured-excerpt">{article.excerpt}</p>
          <div className="im-card-meta">
            <span>Isa Muñoz</span>
            <span className="im-card-meta-dot">·</span>
            <span>{article.date}</span>
          </div>
        </div>
      </article>
    );
  }

  if (density === 'compact') {
    return (
      <article
        className="im-card-compact"
        onClick={() => onOpen?.(article)}
      >
        <div className="im-card-compact-thumb" style={{ background: article.accent }}>
          {article.coverUrl && (
            <img className="im-card-cover-img" src={article.coverUrl} alt={article.title} loading="lazy" />
          )}
          <span className="im-card-compact-kicker">{article.category}</span>
        </div>
        <div className="im-card-compact-body">
          <h3 className="im-card-compact-title">{article.title}</h3>
          <div className="im-card-compact-meta">
            <span>{article.date}</span>
            <span className="im-card-meta-dot">·</span>
            <span>{article.readTime}</span>
          </div>
        </div>
      </article>
    );
  }

  return (
    <article className="im-card" onClick={() => onOpen?.(article)}>
      <div className="im-card-thumb" style={{ background: article.accent }}>
        {article.coverUrl && (
          <img className="im-card-cover-img" src={article.coverUrl} alt={article.title} loading="lazy" />
        )}
        <span className="im-card-thumb-kicker">{article.category}</span>
      </div>
      <div className="im-card-body">
        <span className="im-eyebrow">{article.category} · {article.readTime}</span>
        <h3 className="im-card-title">{article.title}</h3>
        <p className="im-card-excerpt">{article.excerpt}</p>
        <div className="im-card-meta">{article.date}</div>
      </div>
    </article>
  );
}

window.ArticleCard = ArticleCard;