// seekora-ui-sdk/packages/react/src/layout/render-surface-shell.tsx
import * as React from "react";
import { SlotRenderer } from "./slot-renderer";
export function renderSurfaceShell(config) {
    switch (config.surface) {
        case "search":
        case "collection":
            return (React.createElement(React.Fragment, null,
                config.top && config.top.length > 0 && (React.createElement("div", { className: "seekora-layout__top" },
                    React.createElement(SlotRenderer, { specs: config.top }))),
                React.createElement("div", { className: "seekora-layout__grid" },
                    config.sidebar && config.sidebar.length > 0 && (React.createElement("aside", { className: "seekora-layout__sidebar" },
                        React.createElement(SlotRenderer, { specs: config.sidebar }))),
                    React.createElement("div", { className: "seekora-layout__content" },
                        config.header && config.header.length > 0 && (React.createElement("header", { className: "seekora-layout__header" },
                            React.createElement(SlotRenderer, { specs: config.header }))),
                        React.createElement("main", { className: "seekora-layout__main" },
                            React.createElement(SlotRenderer, { specs: config.main }))))));
        case "predictive":
            // dropdown layout: render only the panel (no trigger — theme owns the
            // input element). The host div is body-portalled by v4.js and positioned
            // via JS; the React tree just needs the panel content.
            if (config.layout === "dropdown") {
                return (React.createElement("div", { className: "seekora-layout__panel" }, config.panel && config.panel.length > 0 && (React.createElement(SlotRenderer, { specs: config.panel }))));
            }
            // drawer layout (legacy): render trigger + panel
            return (React.createElement(React.Fragment, null,
                config.trigger && config.trigger.length > 0 && (React.createElement("div", { className: "seekora-layout__trigger" },
                    React.createElement(SlotRenderer, { specs: config.trigger }))),
                React.createElement("div", { className: "seekora-layout__panel" },
                    React.createElement(SlotRenderer, { specs: config.panel }))));
        case "featured":
        case "related":
            return (React.createElement("section", { className: "seekora-layout__section" },
                config.header && config.header.length > 0 && (React.createElement("header", { className: "seekora-layout__section-header" },
                    React.createElement(SlotRenderer, { specs: config.header }))),
                React.createElement(SlotRenderer, { specs: config.grid })));
        case "cart_drawer":
            return (React.createElement("div", { className: "seekora-layout__drawer" },
                config.header && config.header.length > 0 && (React.createElement("header", { className: "seekora-layout__drawer-header" },
                    React.createElement(SlotRenderer, { specs: config.header }))),
                React.createElement("div", { className: "seekora-layout__items" },
                    React.createElement(SlotRenderer, { specs: config.items })),
                config.footer && config.footer.length > 0 && (React.createElement("footer", { className: "seekora-layout__drawer-footer" },
                    React.createElement(SlotRenderer, { specs: config.footer })))));
    }
}
