import { Link } from "@tanstack/react-router";
import type { Post } from "@/lib/cms";

const dateFmt = new Intl.DateTimeFormat("de-DE", {
	day: "2-digit",
	month: "long",
	year: "numeric",
});

export default function PostCard({ post }: { post: Post }) {
	return (
		<Link
			to="/blog/$slug"
			params={{ slug: post.slug }}
			className="block bg-neutral-accent rounded-card p-padding-card no-underline hover:no-underline transition-transform hover:-translate-y-0.5 ring-1 ring-transparent hover:ring-brand/40"
		>
			<time
				dateTime={post.createdAt}
				className="text-secondary text-sm block mb-3"
			>
				{dateFmt.format(new Date(post.createdAt))}
			</time>
			<h3 className="mb-2">{post.title}</h3>
			<p className="text-secondary mb-0">{post.summary}</p>
		</Link>
	);
}
