"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.CardsSkeleton = CardsSkeleton;
var _react = _interopRequireDefault(require("react"));
var _designSystem = require("@wix/design-system");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/Kanban/CardsSkeleton.tsx";
const numberOfCards = 4;
function CardSkeleton({
  index
}) {
  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    key: index,
    "data-hook": "kanban-card-skeleton",
    padding: "12px",
    borderRadius: "6px",
    backgroundColor: "white",
    direction: "vertical",
    gap: "12px",
    border: "1px solid #DFE3EB",
    height: "120px",
    marginBottom: index !== numberOfCards - 1 ? '0px' : '12px',
    boxShadow: "0 4px 10px rgba(0, 0, 0, 0.05)",
    marginLeft: "12px",
    marginRight: "12px",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 14,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonGroup, {
    skin: "light",
    backgroundColor: "white",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 29,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    gap: "8px",
    flex: "1",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 31,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonLine, {
    width: "162px",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 32,
      columnNumber: 11
    }
  }), /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonLine, {
    width: "114px",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 33,
      columnNumber: 11
    }
  })), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    alignContent: "space-between",
    marginTop: "70px",
    justifySelf: "end",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 37,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    verticalAlign: "middle",
    gap: "9px",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 38,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonCircle, {
    diameter: "18px",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 39,
      columnNumber: 13
    }
  }), /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonRectangle, {
    width: "114px",
    height: "18px",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 40,
      columnNumber: 13
    }
  })))));
}
function CardsSkeleton({
  stageKey
}) {
  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    gap: "12px",
    dataHook: `kanban-cards-skeleton-${stageKey}`,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 50,
      columnNumber: 5
    }
  }, Array.from({
    length: numberOfCards
  }, (_, index) => /*#__PURE__*/_react.default.createElement(CardSkeleton, {
    index: index,
    key: index,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 56,
      columnNumber: 9
    }
  })));
}
//# sourceMappingURL=CardsSkeleton.js.map