import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Attributes } from '../../components/Attributes';
import { CollapseIcon } from '../../components/CollapseIcon';
import { useXMLViewerContext } from '../../context/xml-viewer-context';
import { hasAttributes } from '../../helpers';
import { useCollapsible } from '../../hooks/useCollapsible';
export function Tag(props) {
    const { indentation, tagKey, attributes, children, isInline, hasChildren, level } = props;
    const { collapsed, buttonProps } = useCollapsible(level);
    const { theme } = useXMLViewerContext();
    return (_jsxs("div", { children: [_jsxs("span", { ...buttonProps, children: [_jsx("span", { children: indentation }), _jsx(CollapseIcon, { collapsed: collapsed }), _jsx("span", { style: { color: theme.separatorColor }, children: '<' }), _jsx("span", { style: { color: theme.tagColor }, children: `${tagKey}` }), !collapsed && _jsx(Attributes, { attributes: attributes }), collapsed && hasAttributes(attributes) && ' ...', _jsx("span", { style: { color: theme.separatorColor }, children: !hasChildren ? ' />' : '>' })] }), hasChildren && (_jsxs(_Fragment, { children: [!collapsed && children, collapsed && '...', _jsx("span", { style: { color: theme.separatorColor }, children: `${isInline || collapsed ? '' : indentation}</` }), _jsx("span", { style: { color: theme.tagColor }, children: `${tagKey}` }), _jsx("span", { style: { color: theme.separatorColor }, children: '>' })] }))] }));
}
//# sourceMappingURL=index.js.map