import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PlayCircle } from 'lucide-react';
import { parseEmbed, EMBED_PROVIDER_LABEL } from '@actuate-media/cms-core/page-sections';
import { str } from './parts.js';
const RATIO_CLASS = {
    '16:9': 'aspect-video',
    '4:3': 'aspect-[4/3]',
    '1:1': 'aspect-square',
    '9:16': 'aspect-[9/16]',
};
/**
 * Canvas body for the `embed` (video) section. Mirrors the public renderer's
 * reserved aspect-ratio box, but shows a lightweight provider placeholder
 * instead of loading the live external iframe inside the editor.
 */
export function EmbedSection({ section }) {
    const c = section.content;
    const parsed = parseEmbed(str(c, 'url'));
    const ratioClass = RATIO_CLASS[str(c, 'ratio', '16:9')] ?? RATIO_CLASS['16:9'];
    const title = str(c, 'title');
    const caption = str(c, 'caption');
    return (_jsxs("figure", { className: "mx-auto max-w-3xl px-6", 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 ${ratioClass}`, children: [_jsx(PlayCircle, { className: "h-10 w-10", "aria-hidden": true }), _jsx("p", { className: "text-foreground text-sm font-medium", children: parsed ? `${EMBED_PROVIDER_LABEL[parsed.provider]} video` : 'No valid video URL' }), title && _jsx("p", { className: "text-muted-foreground px-4 text-center text-xs", children: title })] }), caption && (_jsx("figcaption", { className: "text-muted-foreground mt-2 text-center text-sm", children: caption }))] }));
}
//# sourceMappingURL=EmbedSection.js.map