import Link from 'next/link';
import { BlogPost } from '@/lib/content';

interface BlogCardProps {
  post: BlogPost;
}

export function BlogCard({ post }: BlogCardProps) {
  return (
    <Link
      href={`/blog/${post.slug}`}
      className="block group"
    >
      <article className="space-y-3">
        <time className="text-sm text-muted-foreground">
          {new Date(post.date).toLocaleDateString('en-US', {
            year: 'numeric',
            month: 'long',
            day: 'numeric'
          })}
        </time>
        <h3 className="text-xl font-semibold text-foreground group-hover:text-primary transition-colors">
          {post.title}
        </h3>
        <p className="text-base text-muted-foreground line-clamp-2">
          {post.excerpt}
        </p>
      </article>
    </Link>
  );
}