import { observer } from 'mobx-react-lite';
import React from 'react';
import { Box } from '@wix/design-system';
import { MaxHeightText } from '../MaxHeightText';
import { ModalHeadingBox } from '../ModalHeadingBox';
import { Heading } from '../Heading';
function _PickerStandaloneLayoutTitles(props) {
    const { state, defaultTitle, defaultSubtitle, titleMaxLines = 2, ...rest } = props;
    const { title: titleFromUrl, subtitle: subtitleFromUrl, isMobileView, } = state;
    const title = titleFromUrl ?? defaultTitle;
    const subtitle = subtitleFromUrl ?? defaultSubtitle;
    const { titlesContainerProps, textProps } = isMobileView
        ? {
            titlesContainerProps: {
                paddingLeft: 'SP4',
                paddingRight: 'SP4',
                align: 'left',
            },
            textProps: {
                textAlign: 'left',
            },
        }
        : {
            titlesContainerProps: {
                paddingLeft: 'SP7',
                paddingRight: 'SP7',
                gap: 'SP1',
                align: 'center',
            },
            textProps: {
                textAlign: 'center',
            },
        };
    return (React.createElement(Box, { display: "grid", ...rest, ...titlesContainerProps },
        React.createElement(ModalHeadingBox, { dataHook: "picker-standalone-title", maxLines: titleMaxLines, lineHeight: 36, width: "100%", ...textProps },
            React.createElement("div", null,
                React.createElement(Heading, { size: "large" }, title))),
        subtitle && (React.createElement(ModalHeadingBox, { lineHeight: 24, maxLines: 1, dataHook: "picker-standalone-subtitle", ...textProps },
            React.createElement("div", null,
                React.createElement(MaxHeightText, { lineHeight: 24 }, subtitle))))));
}
export const PickerStandaloneLayoutTitles = observer(_PickerStandaloneLayoutTitles);
//# sourceMappingURL=PickerStandaloneLayoutTitles.js.map