// @ts-nocheck
import './DiagramsBlock.css';
import React from 'react';
import { cn } from '../../utils/bem';
import { forwardRefWithAs } from '../../utils/types/PropsWithAsAttributes';
import { Grid, GridItem } from '../Grid/Grid';
import { Typography } from '../Typography/Typography';
export var cnDiagramsBlock = cn('DiagramsBlock');
export var DiagramsBlock = forwardRefWithAs(function (props, ref) {
    var _a = props || {}, items = _a.items, doubleArrows = _a.doubleArrows;
    return (React.createElement(React.Fragment, null,
        React.createElement(Grid, { className: cnDiagramsBlock(), breakpoints: {
                desktop: { cols: 12, gap: 'xl' },
                tablet: { cols: 8, colGap: '2xl', rowGap: 'xl' },
                mobile: { gap: 'xl' }
            } }, items.map(function (item) { return (React.createElement(GridItem, { className: cnDiagramsBlock('Item', {
                doubleArrows: item.doubleArrow || doubleArrows
            }), breakpoints: { desktop: { col: 3 }, tablet: { col: 4 } }, key: item.id },
            React.createElement("div", { className: cnDiagramsBlock('Head', {
                    doubleArrows: item.doubleArrow || doubleArrows
                }) },
                React.createElement(Typography.Text, { size: "m", className: cnDiagramsBlock('Title'), weight: "bold" }, item.title)),
            React.createElement("div", { className: cnDiagramsBlock('List') }, item.items.map(function (i) { return (React.createElement("div", { className: cnDiagramsBlock('List-Item'), key: i },
                React.createElement(Typography.Text, { size: "m", className: cnDiagramsBlock('Text') }, i))); })))); }))));
});
