'use strict';

var React = require('react');
var PuzzlePiece = require('./PuzzlePiece-e64f4596.js');
var credential_helpers = require('./credential.helpers-f060ee96.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

const MeritBadgeSkillsCount = ({ skills, onClick }) => {
  const skillsCount = credential_helpers.getTotalCountOfSkills(skills);
  if (skillsCount === 0) return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null);
  const skillsMap = credential_helpers.categorizeSkills(skills);
  const totalSkills = Object.values(skillsMap).reduce(
    (total2, category) => total2 + (category == null ? void 0 : category.length),
    0
  );
  const totalSubskills = Object.values(skillsMap).reduce(
    (total2, category) => total2 + ((category == null ? void 0 : category.totalSubskillsCount) || 0),
    0
  );
  const total = totalSkills + totalSubskills;
  const text = skillsCount === 1 ? "Skill" : "Skills";
  return /* @__PURE__ */ React__default["default"].createElement(
    "div",
    {
      className: "flex items-center justify-center mt-8 cursor-pointer px-4 py-2 bg-white rounded-[20px] shadow-bottom",
      onClick
    },
    /* @__PURE__ */ React__default["default"].createElement("div", { className: "text-violet-500 text-xl flex items-center justify-center tracking-[0.75px] font-poppins font-semibold" }, "+", total, " ", text, " ", /* @__PURE__ */ React__default["default"].createElement("div", { className: "bg-violet-500 rounded-full flex items-center justify-center ml-2 h-[30px] w-[30px] p-1" }, /* @__PURE__ */ React__default["default"].createElement(PuzzlePiece.PuzzlePiece, { className: "text-white", fill: "#fff" })))
  );
};

exports.MeritBadgeSkillsCount = MeritBadgeSkillsCount;
//# sourceMappingURL=MeritBadgeSkillsCount-ae6e8ed4.js.map
