import React from 'react';
import { P as PuzzlePiece } from './PuzzlePiece-a3d9cc62.js';
import { g as getTotalCountOfSkills, c as categorizeSkills } from './credential.helpers-30058000.js';

const MeritBadgeSkillsCount = ({ skills, onClick }) => {
  const skillsCount = getTotalCountOfSkills(skills);
  if (skillsCount === 0) return /* @__PURE__ */ React.createElement(React.Fragment, null);
  const skillsMap = 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.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.createElement("div", { className: "text-violet-500 text-xl flex items-center justify-center tracking-[0.75px] font-poppins font-semibold" }, "+", total, " ", text, " ", /* @__PURE__ */ React.createElement("div", { className: "bg-violet-500 rounded-full flex items-center justify-center ml-2 h-[30px] w-[30px] p-1" }, /* @__PURE__ */ React.createElement(PuzzlePiece, { className: "text-white", fill: "#fff" })))
  );
};

export { MeritBadgeSkillsCount as M };
//# sourceMappingURL=MeritBadgeSkillsCount-0d7bec55.js.map
