import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Table, YFMWrapper } from "../../components/index.js";
import { Col, Grid, GridColumnSize, Row } from "../../gravity-blocks/grid/index.js";
import { block } from "../../utils/index.js";
import './Table.css';
const b = block('table-block');
export const TableBlock = (props) => {
    const { title, table } = props;
    const tableMicrodataScript = React.useMemo(() => {
        const json = JSON.stringify({
            '@context': 'https://schema.org',
            '@type': 'Table',
            name: title,
            description: table.caption,
            accessMode: 'textual',
            accessibilityFeature: 'tableOfContents',
        });
        return _jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: json } });
    }, [title, table.caption]);
    return (_jsxs("div", { className: b(), children: [tableMicrodataScript, _jsx(Grid, { className: b('content'), children: _jsxs(Row, { className: b('row'), children: [_jsx(Col, { sizes: { [GridColumnSize.Md]: 4, [GridColumnSize.All]: 12 }, children: _jsx(YFMWrapper, { tagName: "h2", contentClassName: b('title'), content: title, modifiers: {
                                    constructor: true,
                                } }) }), _jsx(Col, { sizes: { [GridColumnSize.Md]: 8, [GridColumnSize.All]: 12 }, children: _jsx(Table, { className: b('table'), ...table }) })] }) })] }));
};
export default TableBlock;
//# sourceMappingURL=Table.js.map
