"use client";

import Link from "next/link";
import { m } from "motion/react";
import type { PostMeta } from "@/lib/posts";

interface PostCardProps extends PostMeta {
  index?: number;
}

export function PostCard({ slug, title, date, excerpt, index = 0, tags = [] }: PostCardProps) {
  return (
    <m.article
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, delay: index * 0.07 }}
      viewport={{ once: true }}
      className="scroll-mt-20"
    >
      <Link href={`/posts/${slug}/`} className="block">
        <time className="font-mono text-sm text-ink-soft">{date}</time>
        <h3 className="heading-md text-ink mt-1 mb-2 hover:text-accent transition-colors">
          {title}
        </h3>
        {tags && tags.length > 0 && (
          <div className="flex flex-wrap gap-1 mt-2">
            {tags.slice(0, 3).map((tag) => (
              <span key={tag} className="rounded bg-surface px-2 py-0.5 text-xs text-ink-soft">
                {tag}
              </span>
            ))}
          </div>
        )}
        {excerpt && (
          <p className="text-ink-soft leading-7 mt-2">{excerpt}</p>
        )}
      </Link>
    </m.article>
  );
}