import MediaImage from "./MediaImage";
import type { Translator } from "@/lib/i18n";

/**
 * `<x-article-card>`.
 *
 * The date is pre-formatted server-side. Formatting here with
 * Intl.DateTimeFormat would not reproduce config('locales') date_format —
 * Arabic date rendering varies by calendar and numeral system, and a mismatch
 * is immediately visible.
 */
export default function ArticleCard({ post, t }: { post: any; t: Translator }) {
  return (
    <article className="article-card">
      <a className="article-card__image" href={post.url ?? undefined}>
        <MediaImage image={post.image} alt={post.title} />
      </a>

      <div className="article-card__body">
        <h2>
          <a href={post.url ?? undefined}>{post.title}</a>
        </h2>

        {post.publishedAtFormatted ? (
          <div className="article-card__meta">
            <time dateTime={post.publishedAt?.slice(0, 10)}>{post.publishedAtFormatted}</time>
          </div>
        ) : null}

        <a className="text-link" href={post.url ?? undefined}>
          {t("ui.read_more")}
        </a>
      </div>
    </article>
  );
}