import { observer } from 'mobx-react-lite';
import { Box } from '@wix/design-system';
import React, { useMemo } from 'react';
import { SkeletonCardByImagePlacement } from './SkeletonCardByImagePlacement';
function _SkeletonGrid(props) {
    const { state, skeletonRows = 2 } = props;
    const { calcGridProps: { columnCount }, itemsContentWidth, gap, } = state;
    const { gridTemplateColumns, children } = useMemo(() => {
        return {
            gridTemplateColumns: `repeat(${columnCount}, 1fr)`,
            children: new Array(columnCount * skeletonRows)
                .fill(undefined)
                .map((_, i) => React.createElement(SkeletonCardByImagePlacement, { state: state, key: i })),
        };
    }, [columnCount, skeletonRows]);
    if (!itemsContentWidth) {
        return null;
    }
    return (React.createElement(Box, { dataHook: "skeleton-grid", width: "100%", display: "grid", gap: `${gap}px`, gridAutoRows: "1fr", gridTemplateColumns: gridTemplateColumns }, children));
}
export const SkeletonGrid = observer(_SkeletonGrid);
//# sourceMappingURL=SkeletonGrid.js.map