/** کارت مقاله در فهرست مجله */
import Link from "next/link";
import { ArticleImage } from "@/lib/article-markdown";
import { formatJalali } from "@/lib/format";

export interface ArticleCardData {
  slug: string;
  title: string;
  excerpt: string;
  coverUrl: string | null;
  coverAlt: string | null;
  publishedAt: Date | null;
}

export function ArticleCard({ a, priority }: { a: ArticleCardData; priority?: boolean }) {
  return (
    <article className="group">
      <Link href={`/mag/${a.slug}`} className="block">
        <div className="aspect-[16/10] overflow-hidden rounded-2xl bg-mist">
          {a.coverUrl ? (
            <div className="size-full transition-transform duration-500 group-hover:scale-[1.03] [&_img]:size-full [&_img]:max-w-none [&_img]:rounded-none [&_img]:object-contain">
              <ArticleImage src={a.coverUrl} alt={a.coverAlt ?? a.title} priority={priority} />
            </div>
          ) : (
            <div className="grid size-full place-items-center text-sm tracking-[0.3em] text-muted">ZAHORA</div>
          )}
        </div>
        {a.publishedAt && <time dateTime={a.publishedAt.toISOString()} className="mt-3 block text-xs text-muted">{formatJalali(a.publishedAt)}</time>}
        <h2 className="mt-1 text-base leading-7 font-bold group-hover:underline group-hover:underline-offset-4">{a.title}</h2>
        <p className="mt-1 line-clamp-2 text-sm leading-6 text-ink-soft">{a.excerpt}</p>
      </Link>
    </article>
  );
}