import Image from "next/image";
import Link from "next/link";
import { Clock, Eye } from "lucide-react";
import type { ArticleCardData } from "@/types/article";
import { CATEGORIES } from "@/config/site";
import { timeAgoAr } from "@/utils/time";

export function ArticleCard({ article, size = "default" }: { article: ArticleCardData; size?: "default" | "large" }) {
  const categoryLabel = CATEGORIES.find((c) => c.slug === article.category)?.nameAr ?? article.category;

  return (
    <article className="group flex flex-col overflow-hidden rounded-card border border-ink-100 bg-white transition-shadow hover:shadow-md dark:border-ink-800 dark:bg-ink-800/40">
      <Link href={`/news/${article.slug}`} className="relative block aspect-video overflow-hidden bg-ink-100 dark:bg-ink-800">
        {article.imageUrl ? (
          <Image
            src={article.imageUrl}
            alt={article.title}
            fill
            sizes={size === "large" ? "(min-width: 1024px) 60vw, 100vw" : "(min-width: 1024px) 25vw, 50vw"}
            className="object-cover transition-transform duration-300 group-hover:scale-105"
          />
        ) : (
          <div className="flex h-full items-center justify-center text-xs text-ink-400">لا توجد صورة</div>
        )}
        {article.isBreaking && (
          <span className="absolute top-2 right-2 rounded bg-brand px-2 py-0.5 text-xs font-bold text-white">
            عاجل
          </span>
        )}
      </Link>

      <div className="flex flex-1 flex-col gap-2 p-4">
        <span className="w-fit rounded bg-ink-100 px-2 py-0.5 text-xs font-medium text-ink-600 dark:bg-ink-800 dark:text-ink-200">
          {categoryLabel}
        </span>

        <Link href={`/news/${article.slug}`}>
          <h3
            className={`font-display font-bold leading-snug group-hover:text-brand ${
              size === "large" ? "text-2xl" : "text-base"
            }`}
          >
            {article.title}
          </h3>
        </Link>

        {size === "large" && <p className="text-sm text-ink-600 dark:text-ink-200">{article.summary}</p>}

        <div className="mt-auto flex flex-wrap items-center gap-x-3 gap-y-1 pt-2 text-xs text-ink-400">
          <span>المصدر: {article.sourceName}</span>
          <span className="flex items-center gap-1">
            <Clock size={12} /> {timeAgoAr(article.publishedAt)}
          </span>
          <span className="flex items-center gap-1">
            <Eye size={12} /> {article.views.toLocaleString("ar-EG")}
          </span>
          <span>{article.readingTimeMinutes} د قراءة</span>
        </div>
      </div>
    </article>
  );
}