import React from 'react';

const SkillsMeterSegment = ({
  filled = false,
  className,
  skillColor = "bg-cyan-700"
}) => {
  const bgColor = filled ? skillColor : "bg-gray-200";
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: `skills-meter-segment h-[20px] w-full max-w-[27px] ${bgColor} mr-[5px] rounded-[5px]`
    }
  );
};
const SkillsCard = ({
  count = 14,
  title = "Creative Thinking",
  level = "Expert",
  category = "Creativity",
  levelCount = 9,
  skillColor = "bg-cyan-700",
  className,
  onClick = () => {
  }
}) => {
  const renderSkillsMeter = () => {
    const num = levelCount;
    const skillMeter = [...Array(10).keys()].map((counter) => {
      console.log("///counter", counter, "num", num);
      const filled = counter < num;
      return /* @__PURE__ */ React.createElement(SkillsMeterSegment, { filled, key: counter, skillColor });
    });
    return skillMeter;
  };
  const skillsMeter = renderSkillsMeter();
  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-[129px] rounded-[20px] ${className}`
    },
    /* @__PURE__ */ React.createElement("section", { className: "flex skill-card-title-container items-center" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center skill-count-display text-[20px] min-w-[30px] bg-grayscale-100 rounded-full px-[5px] mr-[8px]" }, count), /* @__PURE__ */ React.createElement("h3", { className: "text-[17px] font-semibold" }, title)),
    /* @__PURE__ */ React.createElement("section", { className: "skill-card-details my-[5px]" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-900 font-semibold" }, "Skill Level: ", level), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-900 font-semibold" }, "Categories: ", category)),
    /* @__PURE__ */ React.createElement("section", { className: "flex w-full skill-meter-full mt-[8px]" }, skillsMeter)
  );
};

export { SkillsMeterSegment as S, SkillsCard as a };
//# sourceMappingURL=SkillsCard-5279aac9.js.map
