import Link from "next/link";
import Image from "next/image";
import type { PostMeta } from "@/app/lib/blog-types";
import { formatDate } from "@/app/lib/blog-types";
import styles from "./BlogCard.module.css";

export function BlogCard({ post }: { post: PostMeta }) {
  return (
    <Link href={`/blog/${post.slug}`} className={styles.card}>
      {post.image && (
        <div className={styles.imageWrapper}>
          <Image
            src={post.image}
            alt={post.title}
            fill
            sizes="(max-width: 768px) 100vw, 400px"
            className={styles.image}
          />
        </div>
      )}
      <div className={styles.body}>
        <span className={styles.categoryBadge}>{post.category}</span>
        <h2 className={styles.title}>{post.title}</h2>
        <p className={styles.description}>{post.description}</p>
        <p className={styles.meta}>
          {formatDate(post.date)} · {post.readingTime}
        </p>
      </div>
    </Link>
  );
}