import Link from "next/link";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { formatDate } from "@/lib/utils";

interface BlogPostCardProps {
  post: {
    _id: string;
    title: string;
    slug: string;
    excerpt?: string;
    author: string;
    tags: string[];
    publishedAt: number;
    readingTime?: number;
  };
}

export function BlogPostCard({ post }: BlogPostCardProps) {
  return (
    <Card className="h-full hover:shadow-lg transition-shadow">
      <CardHeader className="mb-2 md:mb-4">
        <CardTitle className="line-clamp-2 mt-2 md:mt-0 mb-2">
          <Link href={`/labs/${post.slug}`} className="hover:text-primary">
            {post.title}
          </Link>
        </CardTitle>
        <div className="flex items-center gap-4 text-sm text-muted-foreground">
          <span>{post.author}</span>
          <span>{formatDate(post.publishedAt)}</span>
          {post.readingTime && <span>{post.readingTime} min read</span>}
        </div>
      </CardHeader>
      {post.excerpt && (
        <CardContent>
          <p className="text-muted-foreground line-clamp-3">{post.excerpt}</p>
        </CardContent>
      )}
    </Card>
  );
}