import React__default from 'react';
import { G as Glimmer } from './Glimmer-es.js';
import { u as useDataListContext } from './DataListContext-es.js';
import { u as useActiveLayout } from './useActiveLayout-es.js';

var styles = {"wrapper":"_85AuDa3YmT4-","loadingItem":"_7DSXt2KpxYc-","glimmer":"_80Ger-sdJDc-","spinning":"ZL6R4NENP64-"};

const LOADING_STATE_LIMIT_ITEMS = 10;
const DATALIST_LOADINGSTATE_ROW_TEST_ID = "ATL-DataList-LoadingState-Row";
function DataListLoadingState() {
    const { headers } = useDataListContext();
    const { layout, activeBreakpoint } = useActiveLayout();
    if (!layout)
        return null;
    const glimmerSize = activeBreakpoint === "xs" ? "small" : "large";
    const glimmersFromHeader = Object.keys(headers).reduce((data, key) => (Object.assign(Object.assign({}, data), { [key]: (React__default.createElement("div", { className: styles.glimmer },
            React__default.createElement(Glimmer, { size: glimmerSize }))) })), {});
    const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(glimmersFromHeader);
    return (React__default.createElement("div", { className: styles.wrapper }, loadingData.map((child, i) => (React__default.createElement("div", { key: i, className: styles.loadingItem, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout(child))))));
}

export { DATALIST_LOADINGSTATE_ROW_TEST_ID as D, LOADING_STATE_LIMIT_ITEMS as L, DataListLoadingState as a };
