import Link from "next/link";
import Image from "next/image";
import type { BlogPost } from "@/lib/blog";
import { ArrowRight } from "./icons";

/**
 * Blog card reused across both category listings and the "more from…" rail.
 * Cover is a branded gradient graphic (no photo assets yet) carrying the
 * post title, mirroring the designed covers in the reference screenshots.
 */
export function BlogCard({ post }: { post: BlogPost }) {
  const href = `/resources/${post.category}/${post.slug}`;

  return (
    <article className="group flex flex-col overflow-hidden rounded-[1.5rem] border border-line bg-paper shadow-soft transition-all hover:-translate-y-1 hover:shadow-lift">
      {/* Cover — image slot (drop in post.image, otherwise a clean gradient) */}
      <Link
        href={href}
        aria-label={post.title}
        className="relative block aspect-[16/10] overflow-hidden bg-mist"
      >
        {post.image ? (
          <Image
            src={post.image}
            alt={post.title}
            fill
            sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
            className="object-cover transition-transform duration-500 group-hover:scale-105"
          />
        ) : (
          <div className={`h-full w-full bg-gradient-to-br ${post.cover}`} />
        )}
      </Link>

      {/* Body */}
      <div className="flex flex-1 flex-col p-6">
        <div className="mb-3">
          <span className="rounded-full bg-wash-green px-3 py-1 text-xs font-bold uppercase tracking-wide text-leaf-deep">
            {post.tag}
          </span>
        </div>

        <h4 className="font-display text-lg font-bold leading-snug text-ink">
          <Link href={href} className="transition-colors hover:text-leaf-deep">
            {post.title}
          </Link>
        </h4>

        <p className="mt-2 line-clamp-3 text-sm leading-relaxed text-muted">
          {post.excerpt}
        </p>

        <Link
          href={href}
          className="mt-5 inline-flex items-center gap-1.5 text-sm font-bold uppercase tracking-wide text-leaf-deep transition-colors hover:text-teal"
        >
          Read More
          <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
        </Link>
      </div>
    </article>
  );
}