import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, } from "react";
import Styles from "./SectionContainer.module.scss";
export function createId(...args) {
    return args.join("-");
}
function _SectionContainer({ children, section, className = "", decoration, onClick }, ref) {
    return (_jsx("div", { ref: ref, onClick: onClick, className: `${Styles.root} ${className}`, id: section, children: _jsxs("div", { className: `${Styles.content} ${decoration ? Styles.decorated : ""}`, children: [children, decoration && (_jsx("div", { className: `${Styles.decoration} ${Styles[decoration]}` }))] }) }));
}
/**
 * This component wraps a section and limits the width of it's content as well as requiring an id to reference to this section
 **/
/**
 * A reusable container component that wraps content with consistent styling
 * and optional decorative elements. It helps organize page sections with
 * controlled width and visual enhancements.
 */
const SectionContainer = forwardRef(_SectionContainer);
export default SectionContainer;
//# sourceMappingURL=SectionContainer.js.map