import React from 'react';
import SkillGraphPlaceholder from './skillgraph.svg';

const SkillStatListItemIndicator = ({
  className = "bg-emerald-700"
}) => {
  return /* @__PURE__ */ React.createElement(
    "span",
    {
      className: `${className} skill-item-stat-indicator w-[10px] h-[10px] rounded-[3px] mr-[10px]`
    }
  );
};
const SkillStatListItem = ({ name, percent, className }) => {
  const colorIndicator = /* @__PURE__ */ React.createElement(SkillStatListItemIndicator, null);
  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between px-[10px] skill-stat-list-item flex text-xs h-[20px] py-[5px] shadow-[0_1px_3px_rgba(0,0,0,0.3)] mt-[10px] rounded-[10px] text-grayscale-900 font-semibold" }, /* @__PURE__ */ React.createElement("span", { className: "flex justify-center items-center" }, colorIndicator, name), /* @__PURE__ */ React.createElement("span", null, percent, "%"));
};
const MoreSkillsListItem = ({ count, percent, className }) => {
  const colorIndicator = /* @__PURE__ */ React.createElement(SkillStatListItemIndicator, { className: "bg-grayscale-200" });
  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between px-[10px] skill-stat-list-item flex text-xs h-[20px] py-[5px] shadow-[0_1px_3px_rgba(0,0,0,0.3)] mt-[10px] rounded-[10px] text-grayscale-900 font-semibold" }, /* @__PURE__ */ React.createElement("span", { className: "flex justify-center items-center" }, colorIndicator, "+", count, " more"), /* @__PURE__ */ React.createElement("span", null, percent, "%"));
};
const SkillsStatsCard = ({
  totalCount = 0,
  skills = [],
  className,
  onClick = () => {
  }
}) => {
  const title = `${totalCount} Skill Categories`;
  const showMore = (skills == null ? void 0 : skills.length) > 3;
  const renderSkillsList = skills == null ? void 0 : skills.slice(0, 3).map((skill) => {
    return /* @__PURE__ */ React.createElement(SkillStatListItem, { name: skill == null ? void 0 : skill.name, percent: skill == null ? void 0 : skill.percent, key: skill == null ? void 0 : skill.name });
  });
  if (showMore) {
    const otherLength = (skills == null ? void 0 : skills.length) - 3;
    renderSkillsList == null ? void 0 : renderSkillsList.push(/* @__PURE__ */ React.createElement(MoreSkillsListItem, { count: otherLength, percent: "27" }));
  }
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      onClick,
      className: `flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[10px] px-[15px] max-w-[400px] h-[199px] rounded-[20px] ${className}`
    },
    /* @__PURE__ */ React.createElement("section", { className: "flex skill-stats-card-title-container items-center" }, /* @__PURE__ */ React.createElement("h3", { className: "text-[17px] text-gray-900 font-bold" }, title)),
    /* @__PURE__ */ React.createElement("section", { className: "skill-stats-card-body my-[5px] flex items-center justify-between" }, /* @__PURE__ */ React.createElement("img", { src: SkillGraphPlaceholder, className: "skill-graph-container" }), /* @__PURE__ */ React.createElement("div", { className: "skill-stat-list w-full  ml-[15px]" }, renderSkillsList))
  );
};

export { SkillsStatsCard as S };
//# sourceMappingURL=SkillsStatsCard-e0cd6137.js.map
