/**
 * SearchLayout Component
 *
 * Provides a layout structure for search interfaces with sidebar and main content
 */
import React, { useEffect } from "react";
import { useSearchContext } from "./SearchProvider";
import { clsx } from "clsx";
import { useIsMobile, } from "../utils/responsive";
import { ensureSeekoraStyles } from "../styles/inject";
export const SearchLayout = ({ sidebar, children, header, footer, sidebarWidth = "300px", className, style, theme: customTheme, showSidebarOnMobile = false, }) => {
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    const { theme } = useSearchContext();
    const layoutTheme = customTheme || {};
    const isMobile = useIsMobile();
    return (React.createElement("div", { className: clsx("seekora-search-layout", layoutTheme.container, className), "data-show-sidebar-on-mobile": showSidebarOnMobile ? "true" : undefined, style: style },
        header && (React.createElement("header", { className: clsx("seekora-search-layout__header", layoutTheme.header) }, header)),
        React.createElement("div", { className: "seekora-search-layout__body", "data-mobile": isMobile ? "true" : undefined },
            sidebar && (!isMobile || showSidebarOnMobile) && (React.createElement("aside", { className: clsx("seekora-search-layout__sidebar", layoutTheme.sidebar), style: !isMobile && sidebarWidth !== "300px"
                    ? { width: sidebarWidth, minWidth: sidebarWidth }
                    : undefined }, sidebar)),
            React.createElement("main", { className: clsx("seekora-search-layout__content", layoutTheme.main) }, children)),
        footer && (React.createElement("footer", { className: clsx("seekora-search-layout__footer", layoutTheme.footer) }, footer))));
};
