import Link from "next/link";
import type { BlogPost } from "@/lib/types";

export default function BlogCard({ post }: { post: BlogPost }) {
  return (
    <article className="rounded-xl2 overflow-hidden bg-white border border-neutral-200 hover:shadow-md transition-shadow">
      <div
        className="h-44 bg-neutral-300 bg-cover bg-center"
        style={{ backgroundImage: `url(${post.coverImage})` }}
      />
      <div className="p-6">
        <h3 className="font-display text-base text-neutral-900 leading-snug">{post.title}</h3>
        <Link
          href={`/blog/${post.slug}`}
          className="mt-4 inline-flex items-center gap-1 text-xs font-semibold uppercase tracking-wide text-accent-500"
        >
          Read more →
        </Link>
      </div>
    </article>
  );
}