Production code
you can inspect.

interface ArticleCardProps {
  article: Article;
  headingLevel?: "h2" | "h3" | "h4";
  variant?: "default" | "hero" | "compact";
  eager?: boolean;
}

export default function ArticleCard({
  article,
  headingLevel = "h3",
  variant = "default",
  eager = false,
}: ArticleCardProps) {
  const Heading = headingLevel;
  const href = routes.article(article.slug);

  return (
    <article className="group relative rounded-xl bg-(--color-surface)">
      <SafeImage
        src={article.image.fallbackSrc}
        alt={article.image.alt}
        loading={eager ? "eager" : "lazy"}
      />
      <BadgeGroup
        category={article.category}
        isPremium={article.isPremium}
      />
      <Heading>
        <Link href={href}>{article.headline}</Link>
      </Heading>
    </article>
  );
}