'use strict';

var React = require('react');
var index$1 = require('./index-ba659c28.js');
var index = require('./index-5488badc.js');
var Trophy = require('./Trophy-9758f0cf.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 AchievementCard = ({
  title = "Title Lorem Ipsum",
  thumbImgSrc,
  claimStatus,
  showSkills = true,
  showChecked,
  checked,
  skillCount,
  showStatus = true,
  onCheckClick,
  onClick = () => {
  }
}) => {
  const thumbClass = thumbImgSrc ? "bg-grayscale-50" : "bg-indigo-200";
  const claimBtnStatusType = claimStatus ? index.LCSubtypes.achievement : index.LCSubtypes.locked;
  const skillIconSrc = index$1.TYPE_TO_MINI_ICON[index.LCSubtypes.skill];
  const skillCountTxt = skillCount && skillCount > 1 ? "Skills" : "Skill";
  const showSkillCounter = showSkills && skillCount !== 0;
  return /* @__PURE__ */ React__default["default"].createElement(
    "div",
    {
      className: `flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[8px] px-[8px] w-[190px] h-[285px] rounded-[20px] rounded-square-card-container`
    },
    /* @__PURE__ */ React__default["default"].createElement(
      "section",
      {
        className: `relative flex h-[120px] ${thumbClass} flex-col justify-center items-center w-full rounded-[20px]`
      },
      thumbImgSrc && /* @__PURE__ */ React__default["default"].createElement(
        "img",
        {
          className: "h-full w-full object-cover rounded-[20px]",
          src: thumbImgSrc != null ? thumbImgSrc : "",
          alt: "Credential Achievement Image"
        }
      ),
      (!thumbImgSrc || thumbImgSrc === "") && /* @__PURE__ */ React__default["default"].createElement(
        Trophy.Trophy,
        {
          className: "achievement-placeholder-trophy flex p-[15px]",
          color: "#ffffff"
        }
      ),
      showSkills && showSkillCounter && /* @__PURE__ */ React__default["default"].createElement("div", { className: "absolute px-[10px] text-[14px] flex items-center justify-center text-indigo-600 skill-pill font-bold min-w-[100px] bottom-[10px] right-[9px] rounded-[20px] h-[30px] bg-indigo-50 " }, /* @__PURE__ */ React__default["default"].createElement(
        "img",
        {
          src: skillIconSrc,
          className: "flex items-center justify-center mr-[4px]"
        }
      ), "+", skillCount, " ", skillCountTxt),
      showChecked && /* @__PURE__ */ React__default["default"].createElement(
        CircleCheckButton.CircleCheckButton,
        {
          checked,
          onClick: onCheckClick,
          className: "absolute top-[5px] left-[5px]"
        }
      )
    ),
    /* @__PURE__ */ React__default["default"].createElement("section", { className: "achievement-title w-full flex justify-center line-clamp-2" }, /* @__PURE__ */ React__default["default"].createElement("p", { className: "text-[14px] text-grayscale-900 font-bold mt-[10px] text-center" }, title)),
    /* @__PURE__ */ React__default["default"].createElement("section", { className: "achievement-card-footer absolute bottom-[6px] left-[5px]" }, showStatus && /* @__PURE__ */ React__default["default"].createElement(
      RoundedPill.RoundedPill,
      {
        onClick,
        showCheckmark: true,
        type: claimBtnStatusType,
        statusText: "Claimed"
      }
    ))
  );
};

exports.AchievementCard = AchievementCard;
//# sourceMappingURL=AchievementCard-98d6c7f9.js.map
