'use strict';

var React = require('react');
var CourseCardPlaceholder = require('./lhplaceholder.png');
var trophylight = require('./minitrophy.svg');
var MiniJobIcon = require('./minijob.svg');
var puzzlelight = require('./minipuzzle.svg');
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);
var CourseCardPlaceholder__default = /*#__PURE__*/_interopDefaultLegacy(CourseCardPlaceholder);
var trophylight__default = /*#__PURE__*/_interopDefaultLegacy(trophylight);
var MiniJobIcon__default = /*#__PURE__*/_interopDefaultLegacy(MiniJobIcon);
var puzzlelight__default = /*#__PURE__*/_interopDefaultLegacy(puzzlelight);

const TYPE_TO_COURSE_MINI_ICON = {
  ["job"]: MiniJobIcon__default["default"],
  ["achievement"]: trophylight__default["default"],
  ["skill"]: puzzlelight__default["default"]
};
const TYPE_TO_COLOR = {
  ["job"]: "bg-emerald-700",
  ["achievement"]: "bg-spice-500",
  ["skill"]: "bg-indigo-500"
};
const CourseCardStatBubble = ({
  count = 0,
  type = index.LCSubtypes.job,
  className
}) => {
  const imgSrc = TYPE_TO_COURSE_MINI_ICON[type];
  const bgColor = TYPE_TO_COLOR[type];
  return /* @__PURE__ */ React__default["default"].createElement(
    "div",
    {
      className: `course-card-stat-bubble px-[10px] rounded-[30px] flex ${bgColor} min-w-[48px] max-w-[80px] h-[30px] items-center ${className}`
    },
    /* @__PURE__ */ React__default["default"].createElement("img", { src: imgSrc, className: "pr-[5px]" }),
    /* @__PURE__ */ React__default["default"].createElement("span", { className: "flex items-center text-sm text-white" }, count)
  );
};
const CourseVerticalCard = ({
  className,
  title,
  thumbImgSrc,
  showStatus,
  claimStatus = false,
  achievementCount = 0,
  skillCount = 0,
  checked,
  showChecked,
  showSubCount,
  onCheckClick,
  onClick
}) => {
  const claimBtnStatusType = claimStatus ? index.LCSubtypes.course : index.LCSubtypes.locked;
  return /* @__PURE__ */ React__default["default"].createElement(
    "div",
    {
      onClick,
      className: `flex flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[8px] px-[8px] w-[190px] h-[285px] rounded-[20px] ${className}`
    },
    /* @__PURE__ */ React__default["default"].createElement(
      "section",
      {
        className: `relative flex h-[120px] flex-col justify-center items-center w-full rounded-[20px]`
      },
      /* @__PURE__ */ React__default["default"].createElement(
        "img",
        {
          src: CourseCardPlaceholder__default["default"],
          className: "course-card-img h-full w-full object-cover rounded-[20px]"
        }
      ),
      showChecked && /* @__PURE__ */ React__default["default"].createElement(
        CircleCheckButton.CircleCheckButton,
        {
          checked,
          onClick: onCheckClick,
          className: "absolute top-[5px] left-[5px]"
        }
      )
    ),
    /* @__PURE__ */ React__default["default"].createElement("div", { className: "course-card-detail-info flex flex-col justify-between" }, /* @__PURE__ */ React__default["default"].createElement("p", { className: "course-card-title text-sm text-center font-semibold line-clamp-2 mt-[4px]" }, title), showSubCount && /* @__PURE__ */ React__default["default"].createElement("div", { className: "course-card-counts-container flex items-center justify-center my-[5px]" }, /* @__PURE__ */ React__default["default"].createElement(
      CourseCardStatBubble,
      {
        type: "achievement",
        count: achievementCount,
        className: "mr-[5px]"
      }
    ), /* @__PURE__ */ React__default["default"].createElement(
      CourseCardStatBubble,
      {
        type: "skill",
        count: skillCount,
        className: "mr-[0px]"
      }
    ))),
    showStatus && /* @__PURE__ */ React__default["default"].createElement("div", { className: "course-card-footer absolute bottom-[6px] left-[5px]" }, /* @__PURE__ */ React__default["default"].createElement(
      RoundedPill.RoundedPill,
      {
        onClick,
        showCheckmark: true,
        type: claimBtnStatusType,
        statusText: "Passed"
      }
    ))
  );
};

exports.CourseVerticalCard = CourseVerticalCard;
//# sourceMappingURL=CourseVerticalCard-0a8ea4dc.js.map
