import React from 'react';
import { st, classes } from './SidebarHeaderNext.st.css.js';
import { dataHooks } from './constants';
import Text from '../Text';
import { SidebarNextContext } from '../SidebarNext/SidebarNextContext';
import { sidebarSkins } from '../SidebarNext/constants';
/** A header within the sidebar with title, subtitle and custom content at the bottom. */
const SidebarHeaderNext = ({ dataHook, className, title, subtitle, children, }) => (React.createElement(SidebarNextContext.Consumer, null, context => {
    const skin = (context && context.skin) || sidebarSkins.dark;
    return (React.createElement("div", { "data-hook": dataHook, "data-skin": skin, className: st(classes.root, { skin }, className) },
        title && (React.createElement(Text, { dataHook: dataHooks.title, className: classes.title, size: "medium", weight: "bold", ellipsis: typeof title === 'string', light: skin === sidebarSkins.dark }, title)),
        subtitle && (React.createElement(Text, { dataHook: dataHooks.subtitle, className: classes.subtitle, size: "tiny", weight: "thin", ellipsis: typeof subtitle === 'string', light: skin === sidebarSkins.dark }, subtitle)),
        children));
}));
SidebarHeaderNext.displayName = 'SidebarHeaderNext';
export default SidebarHeaderNext;
//# sourceMappingURL=SidebarHeaderNext.js.map