import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from 'react';
import { classNames } from '../utils/classNames';
import { cva } from '../utils/cva';
import { pageLayoutSectionClassnames } from './constants';
import { Section, SectionWrapper } from './styles';
const sectionWrapperCva = cva(pageLayoutSectionClassnames.wrapper, {
    variants: {
        isNoMobileSidePadding: {
            true: pageLayoutSectionClassnames.isNoMobileSidePadding,
        },
    },
});
/**
 * Секция страницы. На десктопе между секциями отображается разделитель или отступ. На мобильных разрешениях секции оформляются как карточки.
 *
 * @example
 * <PageLayout content={
 *   <PageLayoutSectionContainer>
 *     <PageLayoutSection>
 *           Секция 1
 *     </PageLayoutSection>
 *   </PageLayoutSectionContainer>
 * } />
 */
export const PageLayoutSection = forwardRef(({ children, className, isNoMobileSidePadding = false }, ref) => {
    return (_jsx(Section, { className: classNames(className, pageLayoutSectionClassnames.root), ref: ref, children: _jsx(SectionWrapper, { className: sectionWrapperCva({ isNoMobileSidePadding }), children: children }) }));
});
