import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from 'react';
import { LayoutVariant } from '@redocly/config';
import { SamplesMiddlePanel, Row } from '../common/index.js';
import { Markdown } from '../Markdown/index.js';
import { ExternalDocumentation } from '../ExternalDocumentation/index.js';
function SectionItemComponent({ item, layout }) {
    const { externalDocs, ast, description } = item;
    const isStacked = layout === LayoutVariant.STACKED;
    const isFullWidth = !item.parent || item.parent.type !== 'tag';
    return (_jsxs(_Fragment, { children: [_jsx(Markdown, { ast: ast, source: description, htmlWrap: (component) => (_jsx(SamplesMiddlePanel, { compact: true, fullWidth: isFullWidth, isStacked: isStacked, children: component })) }), externalDocs && (_jsx(Row, { children: _jsx(SamplesMiddlePanel, { compact: true, fullWidth: isFullWidth, isStacked: isStacked, children: _jsx(ExternalDocumentation, { externalDocs: externalDocs }) }) }))] }));
}
export const SectionItem = memo(SectionItemComponent);
//# sourceMappingURL=SectionItem.js.map