import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { str } from './parts.js';
/**
 * A grid of related posts. Uses resolved posts from context when available;
 * otherwise renders placeholder cards so the layout reads correctly in the
 * editor before data is wired up.
 */
export function RelatedPostsSection({ section, context, }) {
    const c = section.content;
    const heading = str(c, 'heading', 'Related posts');
    const count = Number.parseInt(str(c, 'count', '3'), 10) || 3;
    const resolved = context?.relatedPosts ?? [];
    const cards = resolved.length > 0
        ? resolved.slice(0, count)
        : Array.from({ length: count }, (_, i) => ({
            title: `Related post ${i + 1}`,
            excerpt: 'A short summary of the related post will appear here.',
            url: undefined,
        }));
    const cols = count >= 4 ? 'sm:grid-cols-2 lg:grid-cols-4' : 'sm:grid-cols-3';
    return (_jsxs("div", { className: "mx-auto max-w-5xl px-6", children: [heading && (_jsx("h2", { className: "mb-6 text-2xl font-semibold tracking-tight text-zinc-900", children: heading })), _jsx("div", { className: `grid grid-cols-1 gap-4 ${cols}`, children: cards.map((post, i) => (_jsxs("div", { className: "overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm", children: [_jsx("div", { className: "aspect-[16/9] bg-zinc-100", "aria-hidden": true }), _jsxs("div", { className: "p-4", children: [_jsx("p", { className: "text-base font-medium text-zinc-900", children: post.title }), post.excerpt && (_jsx("p", { className: "mt-1 line-clamp-2 text-sm text-zinc-500", children: post.excerpt }))] })] }, i))) })] }));
}
//# sourceMappingURL=RelatedPostsSection.js.map