'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { backgroundClass, paddingClass } from './parts.js';
import { HeroBannerSection } from './HeroBannerSection.js';
import { MissionSection } from './MissionSection.js';
import { FeatureHighlightSection } from './FeatureHighlightSection.js';
import { ByTheNumbersSection } from './ByTheNumbersSection.js';
import { CtaBannerSection } from './CtaBannerSection.js';
import { ArticleBodySection } from './ArticleBodySection.js';
import { PullQuoteSection } from './PullQuoteSection.js';
import { AuthorBioSection } from './AuthorBioSection.js';
import { RelatedPostsSection } from './RelatedPostsSection.js';
import { GallerySection } from './GallerySection.js';
/** Dispatch a section's body component by type. Shared by editor + preview. */
function SectionBody({ section, context }) {
    switch (section.sectionType) {
        case 'hero':
            return _jsx(HeroBannerSection, { section: section });
        case 'text':
            return _jsx(MissionSection, { section: section });
        case 'feature':
            return _jsx(FeatureHighlightSection, { section: section });
        case 'stats':
            return _jsx(ByTheNumbersSection, { section: section });
        case 'cta':
            return _jsx(CtaBannerSection, { section: section });
        case 'article-body':
            return _jsx(ArticleBodySection, { section: section, context: context });
        case 'quote':
            return _jsx(PullQuoteSection, { section: section });
        case 'author-bio':
            return _jsx(AuthorBioSection, { section: section, context: context });
        case 'related-posts':
            return _jsx(RelatedPostsSection, { section: section, context: context });
        case 'gallery':
            return _jsx(GallerySection, { section: section });
        default:
            return null;
    }
}
/**
 * Renders one section with its background + padding, dispatching to the
 * shared body component. In `editable` mode it layers editor-only chrome
 * (outline + a small purple type label) on top of the same markup the
 * public preview uses — so what you edit is what ships.
 */
export function SectionRenderer({ section, editable = false, selected = false, onSelect, registerRef, context, }) {
    const settings = section.settings ?? {};
    const hidden = editable && !section.visible;
    return (_jsxs("section", { ref: (el) => registerRef?.(section.id, el), "data-section-id": section.id, id: settings.anchorId || undefined, className: `relative ${backgroundClass(settings)} ${paddingClass(settings)} ${settings.cssClass ?? ''} ${hidden ? 'opacity-40' : ''} ${editable ? 'cursor-pointer outline-2 -outline-offset-2 transition-[outline]' : ''} ${selected ? 'outline outline-violet-500' : 'outline-transparent'}`, onClick: editable ? () => onSelect?.(section.id) : undefined, "aria-label": editable ? `${section.name} section` : undefined, children: [editable && selected && (_jsx("span", { className: "pointer-events-none absolute top-0 left-0 z-10 rounded-br-md bg-violet-600 px-2 py-0.5 text-xs font-medium text-white", children: section.name })), editable && hidden && (_jsx("span", { className: "pointer-events-none absolute top-0 right-0 z-10 rounded-bl-md bg-zinc-700 px-2 py-0.5 text-xs font-medium text-white", children: "Hidden" })), _jsx(SectionBody, { section: section, context: context })] }));
}
//# sourceMappingURL=SectionRenderer.js.map