import React from 'react';
import CourseCardPlaceholder from './lhplaceholder.png';
import trophylight from './minitrophy.svg';
import MiniJobIcon from './minijob.svg';
import puzzlelight from './minipuzzle.svg';
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 TYPE_TO_COURSE_MINI_ICON = {
  ["job"]: MiniJobIcon,
  ["achievement"]: trophylight,
  ["skill"]: puzzlelight
};
const TYPE_TO_COLOR = {
  ["job"]: "bg-emerald-700",
  ["achievement"]: "bg-spice-500",
  ["skill"]: "bg-indigo-500"
};
const CourseCardStatBubble = ({
  count = 0,
  type = LCSubtypes.job,
  className
}) => {
  const imgSrc = TYPE_TO_COURSE_MINI_ICON[type];
  const bgColor = TYPE_TO_COLOR[type];
  return /* @__PURE__ */ React.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.createElement("img", { src: imgSrc, className: "pr-[5px]" }),
    /* @__PURE__ */ React.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 ? LCSubtypes.course : LCSubtypes.locked;
  return /* @__PURE__ */ React.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.createElement(
      "section",
      {
        className: `relative flex h-[120px] flex-col justify-center items-center w-full rounded-[20px]`
      },
      /* @__PURE__ */ React.createElement(
        "img",
        {
          src: CourseCardPlaceholder,
          className: "course-card-img h-full w-full object-cover rounded-[20px]"
        }
      ),
      showChecked && /* @__PURE__ */ React.createElement(
        CircleCheckButton,
        {
          checked,
          onClick: onCheckClick,
          className: "absolute top-[5px] left-[5px]"
        }
      )
    ),
    /* @__PURE__ */ React.createElement("div", { className: "course-card-detail-info flex flex-col justify-between" }, /* @__PURE__ */ React.createElement("p", { className: "course-card-title text-sm text-center font-semibold line-clamp-2 mt-[4px]" }, title), showSubCount && /* @__PURE__ */ React.createElement("div", { className: "course-card-counts-container flex items-center justify-center my-[5px]" }, /* @__PURE__ */ React.createElement(
      CourseCardStatBubble,
      {
        type: "achievement",
        count: achievementCount,
        className: "mr-[5px]"
      }
    ), /* @__PURE__ */ React.createElement(
      CourseCardStatBubble,
      {
        type: "skill",
        count: skillCount,
        className: "mr-[0px]"
      }
    ))),
    showStatus && /* @__PURE__ */ React.createElement("div", { className: "course-card-footer absolute bottom-[6px] left-[5px]" }, /* @__PURE__ */ React.createElement(
      RoundedPill,
      {
        onClick,
        showCheckmark: true,
        type: claimBtnStatusType,
        statusText: "Passed"
      }
    ))
  );
};

export { CourseVerticalCard as C };
//# sourceMappingURL=CourseVerticalCard-fe85271e.js.map
