import Link from "next/link";
import type { ArticleCardData } from "@/types/article";
import { timeAgoAr } from "@/utils/time";

export function ArticleListItem({ article, index }: { article: ArticleCardData; index?: number }) {
  return (
    <li>
      <Link href={`/news/${article.slug}`} className="group flex items-start gap-3 py-2.5">
        {index !== undefined && (
          <span className="font-display shrink-0 text-xl font-bold text-ink-200 dark:text-ink-700">
            {index + 1}
          </span>
        )}
        <div className="min-w-0">
          <h4 className="line-clamp-2 text-sm font-medium leading-snug group-hover:text-brand">{article.title}</h4>
          <p className="mt-1 text-xs text-ink-400">{timeAgoAr(article.publishedAt)}</p>
        </div>
      </Link>
    </li>
  );
}