import Link from "next/link";

interface ArticleCardData {
  id: number;
  title: string;
  excerpt: string | null;
  imageUrl: string | null;
  label: string | null;
}

export function ArticleCard({ article }: { article: ArticleCardData }) {
  return (
    <Link
      href={`/article/${article.id}`}
      className="group block overflow-hidden rounded-2xl bg-bg-white shadow-sm transition hover:shadow-md"
    >
      <div className="relative aspect-[4/3] overflow-hidden">
        <img
          src={article.imageUrl || "https://images.unsplash.com/photo-1533105079780-92b9be482077?auto=format&fit=crop&w=800&q=80"}
          alt={article.title}
          className="h-full w-full object-cover transition duration-500 group-hover:scale-105"
        />
        {article.label && (
          <span className="absolute left-3 top-3 rounded-full bg-merah-ranata px-3 py-1 text-xs font-semibold text-white">
            {article.label}
          </span>
        )}
      </div>

      <div className="p-4">
        <h3 className="line-clamp-2 font-semibold text-heading">
          {article.title}
        </h3>
        {article.excerpt && (
          <p className="mt-1 line-clamp-2 text-sm text-body">
            {article.excerpt}
          </p>
        )}
      </div>
    </Link>
  );
}