import React from 'react';
import { classes } from './Section.st.css.js';
import { useId } from '../../../utils/useId';
import SectionHeader from '../../../SectionHeader';
import { dataHooks } from '../../constants';
const Section = ({ title, titleVisible = true, suffix, children, ariaLabel, dataHook, as, 'aria-describedby': ariaDescribedBy, id, }) => {
    const generatedId = useId('title_');
    const titleId = id || generatedId;
    const getAriaLabel = () => {
        if (typeof title !== 'string') {
            return ariaLabel;
        }
        return ariaLabel || title;
    };
    return (React.createElement("div", { "data-hook": dataHook, "data-title": typeof title === 'string' ? title : undefined, className: classes.section },
        titleVisible && (React.createElement(SectionHeader, { id: titleId, skin: "neutral", divider: "bottom", align: "start", size: "small", horizontalPadding: "large", title: title, suffix: suffix, dataHook: dataHooks.sidePanelSectionHeader, as: as, "aria-describedby": ariaDescribedBy })),
        React.createElement("div", { role: "group", "aria-label": getAriaLabel(), "aria-labelledby": titleVisible ? titleId : undefined }, children)));
};
Section.displayName = 'Section';
export default Section;
//# sourceMappingURL=Section.js.map