"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.StagesSkeleton = StagesSkeleton;
var _designSystem = require("@wix/design-system");
var _react = _interopRequireDefault(require("react"));
var _StagesSkeleton = _interopRequireDefault(require("./StagesSkeleton.scss"));
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/Kanban/StagesSkeleton.tsx"; // @ts-expect-error
const numberOfStages = 6;
function StageSkeleton({
  index
}) {
  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    key: index,
    width: "270px",
    dataHook: "kanban-stage-skeleton",
    backgroundColor: "#E5E6E9",
    borderRadius: "8px",
    padding: "12px",
    direction: "vertical",
    height: "calc(100vh - 300px)",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 10,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    width: "246px",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 20,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonGroup, {
    skin: "dark",
    backgroundColor: "#E5E6E9",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 21,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    gap: "12px",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 22,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonLine, {
    className: _StagesSkeleton.default.skeletonLine,
    width: "185px",
    marginBottom: "5px",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 23,
      columnNumber: 13
    }
  }), /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonLine, {
    className: _StagesSkeleton.default.skeletonLine,
    width: "104px",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 28,
      columnNumber: 13
    }
  })))));
}
function StagesSkeleton() {
  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "horizontal",
    gap: "12px",
    dataHook: "kanban-stages-skeleton",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 38,
      columnNumber: 5
    }
  }, Array.from({
    length: numberOfStages
  }, (_, index) => /*#__PURE__*/_react.default.createElement(StageSkeleton, {
    index: index,
    key: index,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 40,
      columnNumber: 9
    }
  })));
}
//# sourceMappingURL=StagesSkeleton.js.map