import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useActionHandlers } from '@gravity-ui/uikit';
import { Foldable, HTML, ToggleArrow, YFMWrapper } from "../../../components/index.js";
import Link from "../../../components/Link/Link.js";
import { block } from "../../../utils/index.js";
import './FoldableListBlockItem.css';
const b = block('FoldableListBlockItem');
export const FoldableListBlockItem = ({ title: itemTitle, text: itemText, link, listStyle = 'dash', isOpened, onClick, }) => {
    const { onKeyDown } = useActionHandlers(onClick);
    return (_jsxs("div", { className: b(), itemScope: true, role: 'listitem', children: [_jsxs("button", { className: b('title'), onClick: onClick, "aria-expanded": isOpened, onKeyDown: onKeyDown, children: [_jsx(HTML, { children: itemTitle }), _jsx(ToggleArrow, { open: isOpened, size: 16, type: 'vertical', iconType: "navigation", className: b('arrow') })] }), _jsx(Foldable, { isOpened: isOpened, children: _jsxs("div", { className: b('text'), "aria-hidden": !isOpened, children: [_jsx(YFMWrapper, { content: itemText, modifiers: {
                                constructor: true,
                                constructorListStyle: true,
                                constructorListStyleDash: listStyle === 'dash',
                            } }), link && _jsx(Link, { ...link, tabIndex: isOpened ? 0 : -1, className: b('link') })] }) })] }));
};
//# sourceMappingURL=FoldableListBlockItem.js.map
