import Image from "next/image";
import Link from "next/link";
import { CalendarDays, UserRound } from "lucide-react";
import { pickLocalizedText } from "@/lib/utils/i18n";
import type { Article, Locale } from "@/types/domain";

export function ArticleCard({
  article,
  locale,
  className = "",
}: {
  article: Article;
  locale: Locale;
  className?: string;
}) {
  const isArabic = locale === "ar";
  const title = pickLocalizedText(article, "title_ar", "title_en", locale, article.title_ar);
  const excerpt = pickLocalizedText(article, "excerpt_ar", "excerpt_en", locale, article.excerpt_ar || article.excerpt_en || "");
  const dateValue = article.published_at ? new Date(article.published_at) : null;
  const formattedDate = dateValue
    ? new Intl.DateTimeFormat(isArabic ? "ar-EG" : "en-US", { day: "2-digit", month: "short", year: "numeric" }).format(dateValue)
    : null;

  return (
    <article className={`overflow-hidden rounded-2xl border border-[var(--border)] bg-white shadow-[0_8px_24px_rgba(15,23,42,0.06)] transition hover:-translate-y-0.5 hover:shadow-[0_14px_28px_rgba(15,23,42,0.1)] ${className}`}>
      <Link href={`/articles/${article.id}`} className="block">
        <Image
          src={article.image || "/images/store-cover-placeholder.svg"}
          alt={title}
          width={600}
          height={320}
          unoptimized
          className="h-44 w-full object-cover"
        />
      </Link>
      <div className="space-y-3 p-4">
        <h3 className="line-clamp-2 text-lg font-extrabold leading-7 text-slate-900">{title}</h3>
        <p className="line-clamp-3 text-sm leading-7 text-slate-600">{excerpt || (isArabic ? "اقرأ المزيد من المقالات والنصائح الذكية للتوفير." : "Read more smart savings tips and offer guides.")}</p>

        <div className="flex flex-wrap items-center gap-3 text-xs text-slate-500">
          {formattedDate ? (
            <span className="inline-flex items-center gap-1">
              <CalendarDays size={14} />
              {formattedDate}
            </span>
          ) : null}
          {article.author_name ? (
            <span className="inline-flex items-center gap-1">
              <UserRound size={14} />
              {article.author_name}
            </span>
          ) : null}
        </div>

        <Link
          href={`/articles/${article.id}`}
          className="inline-flex h-9 items-center rounded-full bg-[var(--primary)] px-4 text-xs font-bold text-white transition hover:opacity-90"
        >
          {isArabic ? "قراءة المقال" : "Read Article"}
        </Link>
      </div>
    </article>
  );
}