import React from 'react';
import Link from "next/link";
import type { BlogPost } from "@/lib/types";

export function RelatedPosts({ posts }: { posts: BlogPost[] }) {
    if (!posts?.length) return null;

    return (
        <section className="rounded-xl border border-gray-100 bg-gray-50 p-6 my-8">
            <h2 className="text-lg font-bold text-gray-900 mb-4">Related Guides</h2>
            <ul className="grid gap-4 sm:grid-cols-2">
                {posts.map(p => (
                    <li key={p.slug} className="group">
                        <Link href={`/blog/${p.slug}`} className="block h-full p-4 rounded-lg bg-white border border-gray-200 shadow-sm hover:shadow-md hover:border-blue-300 transition-all">
                            <h3 className="font-semibold text-gray-900 group-hover:text-blue-600 mb-2 line-clamp-2">
                                {p.title}
                            </h3>
                            <p className="text-sm text-gray-500 line-clamp-2">{p.description}</p>
                        </Link>
                    </li>
                ))}
            </ul>
        </section>
    );
}