"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.SetupWidgetHeader = void 0;
var _react = _interopRequireDefault(require("react"));
var _designSystem = require("@wix/design-system");
var _react2 = require("@wix/bex-core/react");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/SetupWidget/SetupWidgetHeader.tsx";
/**
 * Widget header: title + "X/Y completed" ratio + progress bar.
 * - Desktop: title left, ratio + bar inline on the right.
 * - Mobile: large heading stacked above the ratio and a full-width bar.
 */
const SetupWidgetHeader = ({
  title,
  completedCount,
  totalCount,
  progressPercentage,
  isMobile
}) => {
  const {
    translate: t
  } = (0, _react2.useWixPatternsContainer)();
  const resolvedTitle = title ?? t('cairo.setupWidget.title');
  const ratioLabel = t('cairo.setupWidget.progress.label', {
    completed: completedCount,
    total: totalCount
  });
  if (isMobile) {
    return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      direction: "vertical",
      gap: "SP2",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 35,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(_designSystem.Heading, {
      dataHook: "setup-widget-title",
      size: "large",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 36,
        columnNumber: 9
      }
    }, resolvedTitle), /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
      dataHook: "setup-widget-progress",
      size: "small",
      secondary: true,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 39,
        columnNumber: 9
      }
    }, ratioLabel), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      width: "100%",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 42,
        columnNumber: 9
      }
    }, /*#__PURE__*/_react.default.createElement(_designSystem.LinearProgressBar, {
      skin: "standard",
      value: progressPercentage,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 43,
        columnNumber: 11
      }
    })));
  }
  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    align: "space-between",
    verticalAlign: "middle",
    marginBottom: "SP4",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 50,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Heading, {
    dataHook: "setup-widget-title",
    size: "medium",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 51,
      columnNumber: 7
    }
  }, resolvedTitle), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    gap: "SP1",
    verticalAlign: "middle",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 54,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    dataHook: "setup-widget-progress",
    size: "tiny",
    weight: "thin",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 55,
      columnNumber: 9
    }
  }, ratioLabel), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    width: 220,
    marginLeft: "-8px",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 58,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.LinearProgressBar, {
    skin: "standard",
    value: progressPercentage,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 59,
      columnNumber: 11
    }
  }))));
};
exports.SetupWidgetHeader = SetupWidgetHeader;
//# sourceMappingURL=SetupWidgetHeader.js.map