import Link from "next/link";
import { formatDate } from "@/lib/utils";

interface Props {
  slug: string;
  title: string;
  excerpt: string;
  categoryName?: string;
  categorySlug?: string;
  featuredImage?: string;
  publishedAt?: Date | string | null;
  author?: string;
}

export function ArticleCard({
  slug,
  title,
  excerpt,
  categoryName,
  categorySlug,
  featuredImage,
  publishedAt,
  author,
}: Props) {
  return (
    <article className="group flex flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white transition hover:-translate-y-0.5 hover:border-indigo-200 hover:shadow-lg hover:shadow-indigo-100">
      {featuredImage && (
        <Link href={`/blog/${slug}`} className="block aspect-[16/9] overflow-hidden bg-slate-100">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={featuredImage}
            alt={title}
            loading="lazy"
            className="h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]"
          />
        </Link>
      )}
      <div className="flex flex-1 flex-col p-5">
        {categoryName && (
          <Link
            href={categorySlug ? `/category/${categorySlug}` : "/blog"}
            className="mb-2 self-start rounded-full bg-indigo-50 px-2.5 py-0.5 text-xs font-semibold text-indigo-600"
          >
            {categoryName}
          </Link>
        )}
        <h3 className="text-lg font-semibold leading-snug text-slate-900">
          <Link href={`/blog/${slug}`} className="transition hover:text-indigo-600">
            {title}
          </Link>
        </h3>
        {excerpt && (
          <p className="mt-2 flex-1 text-sm leading-relaxed text-slate-500">{excerpt}</p>
        )}
        <div className="mt-4 flex items-center gap-2 text-xs text-slate-400">
          {publishedAt && <time dateTime={String(publishedAt)}>{formatDate(publishedAt)}</time>}
          {author && (
            <>
              <span>·</span>
              <span>{author}</span>
            </>
          )}
        </div>
      </div>
    </article>
  );
}