import Link from 'next/link';
import type { PlazaPost } from '@/types/plaza';
import { plazaPath } from '@/lib/site';

export function FeaturedBanner({ posts }: { posts: PlazaPost[] }) {
  if (posts.length === 0) return null;

  return (
    <section className="space-y-3">
      <h2 className="text-lg font-semibold text-[#17221d]">精选推荐</h2>
      <div className="grid gap-3 md:grid-cols-2">
        {posts.slice(0, 5).map((post) => (
          <Link
            key={post.id}
            href={plazaPath(`p/${post.id}`)}
            className="rounded-2xl border border-[#d6d0c3] bg-gradient-to-r from-[#2f6f57] to-[#1f4f3f] p-5 text-[#fffdf7] shadow-sm transition hover:-translate-y-0.5"
          >
            <p className="text-sm opacity-80">{post.category.icon} {post.category.name}</p>
            <h3 className="mt-2 text-lg font-semibold leading-snug">{post.title}</h3>
            <p className="mt-2 text-sm opacity-90">{post.author.display_name}</p>
          </Link>
        ))}
      </div>
    </section>
  );
}