'use strict';

var React = require('react');
var index = require('./index-5488badc.js');
var CircleCheckButton = require('./CircleCheckButton-f76e5b5d.js');
var RoundedPill = require('./RoundedPill-b54f3ac1.js');

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

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

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__default["default"].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__default["default"].createElement(
      CircleCheckButton.CircleCheckButton,
      {
        onClick: onCheckClicked,
        checked,
        className: buttonClass,
        bgColor: "bg-grayscale-200"
      }
    ),
    /* @__PURE__ */ React__default["default"].createElement("h4", { className: "text-indigo-600 text-[14px] text-center line-clamp-2" }, title),
    /* @__PURE__ */ React__default["default"].createElement("p", { className: "line-clamp-2 text-[12px] text-center" }, description),
    /* @__PURE__ */ React__default["default"].createElement("div", null, showStatus && /* @__PURE__ */ React__default["default"].createElement(RoundedPill.RoundedPill, { type: index.LCSubtypes.skill, statusText: "Earned", onClick }))
  );
};

exports.SkillTabCard = SkillTabCard;
//# sourceMappingURL=SkillTabCard-efade17a.js.map
