import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2024-2026 GoodData Corporation
import { useMemo } from "react";
import ReactLoadingSkeleton from "react-loading-skeleton";
import { bem } from "../@utils/bem.js";
const { b, e } = bem("gd-ui-kit-skeleton");
/**
 * @internal
 */
export function UiSkeleton({ itemsCount = 1, itemHeight = 24, itemPadding = 0, itemWidth, inline = false, itemsGap = 10, direction = "column", itemBorderRadius, }) {
    const items = Array.from({ length: itemsCount }, (_, idx) => (_jsx("div", { className: e("item"), style: {
            height: typeof itemHeight === "number" || typeof itemHeight === "undefined"
                ? itemHeight
                : itemHeight[idx],
            width: typeof itemWidth === "number" || typeof itemWidth === "undefined"
                ? itemWidth
                : itemWidth[idx],
            padding: typeof itemPadding === "number"
                ? `0 ${itemPadding ?? 0}px`
                : `0 ${itemPadding[idx] ?? 0}px`,
        }, children: _jsx(ReactLoadingSkeleton, { borderRadius: itemBorderRadius }) }, idx)));
    const style = useMemo(() => ({ gap: itemsGap }), [itemsGap]);
    return (_jsx("div", { className: b({ direction, inline }), style: style, children: items }));
}
