import Image from "next/image";
import Link from "next/link";
import { Clock, MessageCircle, Sparkles } from "lucide-react";

type ArticleCardProps = {
  article: {
    title: string;
    slug: string;
    excerpt: string;
    coverImage?: string | null;
    readingMinutes: number;
    publishedAt?: Date | null;
    category: { name: string; slug: string; color: string };
    author: { name?: string | null };
    _count?: { comments?: number; likes?: number; bookmarks?: number };
  };
  priority?: boolean;
};

export function ArticleCard({ article, priority }: ArticleCardProps) {
  return (
    <article className="glass group overflow-hidden rounded-lg">
      <Link href={`/article/${article.slug}`} className="block">
        <div className="relative aspect-[16/10] overflow-hidden bg-white/5">
          {article.coverImage ? (
            <Image
              src={article.coverImage}
              alt={article.title}
              fill
              priority={priority}
              sizes="(max-width: 768px) 100vw, 33vw"
              className="object-cover transition duration-500 group-hover:scale-105"
            />
          ) : (
            <div className="absolute inset-0 bg-gradient-to-br from-cyanx/25 to-violetx/25" />
          )}
          <div className="absolute left-3 top-3 rounded-full border border-white/15 bg-ink/75 px-3 py-1 text-xs font-semibold text-white backdrop-blur">
            {article.category.name}
          </div>
        </div>
        <div className="p-5">
          <div className="mb-3 flex items-center gap-3 text-xs text-white/48">
            <span className="flex items-center gap-1"><Clock size={14} /> {article.readingMinutes} min</span>
            <span className="flex items-center gap-1"><MessageCircle size={14} /> {article._count?.comments || 0}</span>
            <span className="flex items-center gap-1"><Sparkles size={14} /> {article.author.name || "Infomix"}</span>
          </div>
          <h2 className="font-display text-xl font-bold leading-tight text-white group-hover:text-cyanx">{article.title}</h2>
          <p className="mt-3 line-clamp-3 text-sm leading-6 text-white/62">{article.excerpt}</p>
        </div>
      </Link>
    </article>
  );
}