'use client';

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

export function PostCard({ slug, title, date, excerpt, tags = [], author, readingTime, index = 0 }: PostMeta & { index?: number }) {
  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="group relative scroll-mt-20 rounded-xl border border-border bg-canvas p-6 transition-all hover:border-border/80 hover:shadow-card"
    >
      <Link href={`/posts/${slug}/`} className="block">
        <div className="flex items-center gap-3 text-xs text-ink-soft mb-3">
          <time className="font-mono">{date}</time>
          {author && <span className="text-ink-soft/70">·</span>}
          {author && <span>{author}</span>}
          {readingTime && <span className="text-ink-soft/70">·</span>}
          {readingTime && <span className="font-mono">{readingTime} min read</span>}
        </div>
        <h3 className="heading-md text-ink mt-0 mb-3 group-hover:text-accent transition-colors">
          {title}
        </h3>
        {tags && tags.length > 0 && (
          <div className="flex flex-wrap gap-1.5 mt-3">
            {tags.slice(0, 3).map((tag) => (
              <span key={tag} className="rounded-full bg-surface/50 border border-border px-2.5 py-0.5 text-xs text-ink-soft">
                {tag}
              </span>
            ))}
          </div>
        )}
        {excerpt && (
          <p className="text-ink-soft leading-relaxed mt-3 text-sm">{excerpt}</p>
        )}
      </Link>
    </m.article>
  );
}