import React from 'react';
import { L as LCSubtypes } from './index-28917993.js';
import { C as CircleCheckButton } from './CircleCheckButton-23a9c7d4.js';
import { R as RoundedPill } from './RoundedPill-50279e5d.js';

const SkillTabCard = ({
  title,
  description,
  checked = false,
  showChecked,
  onClick,
  onCheckClicked,
  showStatus = true,
  className = "skill-tab-card"
}) => {
  const buttonClass = checked ? "skill-tab-check-toggle checked" : "skill-tab-check-toggle unchecked";
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: `flex-col flex justify-between items-center font-bold shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[8px] px-[8px] w-[190px] h-[168px] rounded-[20px] ${className}`
    },
    showChecked && /* @__PURE__ */ React.createElement(
      CircleCheckButton,
      {
        onClick: onCheckClicked,
        checked,
        className: buttonClass,
        bgColor: "bg-grayscale-200"
      }
    ),
    /* @__PURE__ */ React.createElement("h4", { className: "text-indigo-600 text-[14px] text-center line-clamp-2" }, title),
    /* @__PURE__ */ React.createElement("p", { className: "line-clamp-2 text-[12px] text-center" }, description),
    /* @__PURE__ */ React.createElement("div", null, showStatus && /* @__PURE__ */ React.createElement(RoundedPill, { type: LCSubtypes.skill, statusText: "Earned", onClick }))
  );
};

export { SkillTabCard as S };
//# sourceMappingURL=SkillTabCard-f2edb3fc.js.map
