/**
 * SearchLayout Component
 *
 * Provides a layout structure for search interfaces with sidebar and main content
 */
import React from 'react';
import { useSearchContext } from './SearchProvider';
import { clsx } from 'clsx';
import { useIsMobile, useResponsivePadding, useResponsiveGap } from '../utils/responsive';
export const SearchLayout = ({ sidebar, children, header, footer, sidebarWidth = '300px', className, style, theme: customTheme, showSidebarOnMobile = false, }) => {
    const { theme } = useSearchContext();
    const layoutTheme = customTheme || {};
    const isMobile = useIsMobile();
    const responsivePadding = useResponsivePadding(parseInt(theme.spacing.medium) || 16);
    const responsiveGap = useResponsiveGap(parseInt(theme.spacing.large) || 24);
    return (React.createElement("div", { className: clsx(layoutTheme.container, className), style: {
            display: 'flex',
            flexDirection: 'column',
            minHeight: '100vh',
            width: '100%',
            maxWidth: '100%',
            backgroundColor: theme.colors.background,
            ...style,
        } },
        header && (React.createElement("header", { className: layoutTheme.header, style: {
                padding: responsivePadding,
                borderBottom: `1px solid ${theme.colors.border}`,
                backgroundColor: theme.colors.background,
            } }, header)),
        React.createElement("div", { style: {
                display: 'flex',
                flex: 1,
                width: '100%',
                maxWidth: '100%',
                flexDirection: isMobile ? 'column' : 'row',
                gap: responsiveGap,
                padding: responsivePadding,
                backgroundColor: theme.colors.background,
                color: theme.colors.text,
                overflow: 'visible',
            } },
            sidebar && (!isMobile || showSidebarOnMobile) && (React.createElement("aside", { className: layoutTheme.sidebar, style: {
                    width: isMobile ? '100%' : sidebarWidth,
                    minWidth: isMobile ? '100%' : sidebarWidth,
                    flexShrink: 0,
                } }, sidebar)),
            React.createElement("main", { className: layoutTheme.main, style: {
                    flex: 1,
                    minWidth: 0,
                    width: '100%',
                    maxWidth: '100%',
                    backgroundColor: theme.colors.background,
                    color: theme.colors.text,
                    overflow: 'auto',
                } }, children)),
        footer && (React.createElement("footer", { className: layoutTheme.footer, style: {
                padding: responsivePadding,
                borderTop: `1px solid ${theme.colors.border}`,
                backgroundColor: theme.colors.background,
            } }, footer))));
};
