import { Box, SkeletonGroup, SkeletonLine } from '@wix/design-system';
import React from 'react';
// @ts-expect-error
import styles from './StagesSkeleton.scss';
const numberOfStages = 6;
function StageSkeleton({ index }) {
    return (React.createElement(Box, { key: index, width: "270px", dataHook: "kanban-stage-skeleton", backgroundColor: "#E5E6E9", borderRadius: "8px", padding: "12px", direction: "vertical", height: "calc(100vh - 300px)" },
        React.createElement(Box, { width: "246px" },
            React.createElement(SkeletonGroup, { skin: "dark", backgroundColor: "#E5E6E9" },
                React.createElement(Box, { direction: "vertical", gap: "12px" },
                    React.createElement(SkeletonLine, { className: styles.skeletonLine, width: "185px", marginBottom: "5px" }),
                    React.createElement(SkeletonLine, { className: styles.skeletonLine, width: "104px" }))))));
}
export function StagesSkeleton() {
    return (React.createElement(Box, { direction: "horizontal", gap: "12px", dataHook: "kanban-stages-skeleton" }, Array.from({ length: numberOfStages }, (_, index) => (React.createElement(StageSkeleton, { index: index, key: index })))));
}
//# sourceMappingURL=StagesSkeleton.js.map