import Link from 'next/link';
import { formatDate } from '@/lib/utils';

export type PostCardPost = {
  slug: string;
  title: string;
  excerpt: string;
  publishedAt: Date | null;
  readingMinutes: number;
  tags: { tag: { name: string; slug: string } }[];
  author: { name: string; slug: string };
};

export function PostCard({ post }: { post: PostCardPost }) {
  return (
    <article className="card flex flex-col">
      {post.tags.length > 0 && (
        <div className="flex flex-wrap gap-2">
          {post.tags.map(({ tag }) => (
            <Link
              key={tag.slug}
              href={`/tags/${tag.slug}`}
              className="badge bg-brand-50 text-brand-700 dark:bg-brand-700/20 dark:text-brand-100"
            >
              {tag.name}
            </Link>
          ))}
        </div>
      )}
      <h2 className="mt-3 text-lg font-semibold">
        <Link href={`/blog/${post.slug}`} className="hover:underline">
          {post.title}
        </Link>
      </h2>
      <p className="muted mt-2 flex-1 text-sm">{post.excerpt}</p>
      <p className="muted mt-4 text-xs">
        {post.publishedAt ? formatDate(post.publishedAt) : 'Draft'} · {post.readingMinutes} min read ·{' '}
        <Link href={`/authors/${post.author.slug}`} className="hover:underline">
          {post.author.name}
        </Link>
      </p>
    </article>
  );
}