import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Puzzle } from 'lucide-react';
import { parseWidgetEmbed, WIDGET_PROVIDER_LABEL } from '@actuate-media/cms-core/page-sections';
import { str } from './parts.js';
/**
 * Canvas body for the `widget-embed` section. Shows a reserved-height placeholder
 * instead of loading third-party scripts inside the editor.
 */
export function WidgetEmbedSection({ section }) {
    const c = section.content;
    const parsed = parseWidgetEmbed(c);
    const title = str(c, 'title');
    const minHeight = parsed?.minHeightPx ?? 280;
    return (_jsx("section", { className: "mx-auto max-w-3xl px-6", "aria-label": title || 'Third-party widget', children: _jsxs("div", { className: "bg-muted text-muted-foreground relative flex w-full flex-col items-center justify-center gap-2 overflow-hidden rounded-xl", style: { minHeight: `${minHeight}px` }, children: [_jsx(Puzzle, { className: "h-8 w-8", "aria-hidden": true }), _jsx("p", { className: "text-foreground text-sm font-medium", children: parsed
                        ? `${WIDGET_PROVIDER_LABEL[parsed.provider]} widget`
                        : 'Configure widget provider + ids' }), title && _jsx("p", { className: "text-muted-foreground px-4 text-center text-xs", children: title })] }) }));
}
//# sourceMappingURL=WidgetEmbedSection.js.map