import React from 'react';
import CaretRightFilled from './CaretRightFilled.svg';
import DefaultFace from './default-face.jpeg';
import AddAwardLight from './addawardlight.svg';
import ThreeDots from './DotsThreeOutline.svg';
import { W as WalletCategoryTypes } from './index-28917993.js';
import { b as TYPE_TO_WALLET_DARK_COLOR, a as TYPE_TO_IMG_SRC } from './index-b102febc.js';
import { C as CircleCheckButton } from './CircleCheckButton-5a97f071.js';

const getDarkBGColor = (type) => {
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
  if (!type)
    return "";
  if (type === ((_a = WalletCategoryTypes) == null ? void 0 : _a.achievements)) {
    return "bg-orange-500";
  } else if (type === ((_b = WalletCategoryTypes) == null ? void 0 : _b.learningHistory)) {
    return "bg-emerald-500";
  } else if (type === ((_c = WalletCategoryTypes) == null ? void 0 : _c.skills)) {
    return "bg-violet-500";
  } else if (type === ((_d = WalletCategoryTypes) == null ? void 0 : _d.jobHistory)) {
    return "bg-blue-500";
  } else if (type === ((_e = WalletCategoryTypes) == null ? void 0 : _e.socialBadge)) {
    return "bg-cyan-500";
  } else if (type === ((_f = WalletCategoryTypes) == null ? void 0 : _f.relationships)) {
    return "bg-pink-500";
  } else if (type === ((_g = WalletCategoryTypes) == null ? void 0 : _g.accommodations)) {
    return "bg-amber-500";
  } else if (type === ((_h = WalletCategoryTypes) == null ? void 0 : _h.accomplishments)) {
    return "bg-lime-500";
  } else if (type === ((_i = WalletCategoryTypes) == null ? void 0 : _i.events)) {
    return "bg-fuchsia-500";
  } else if (type === ((_j = WalletCategoryTypes) == null ? void 0 : _j.membership)) {
    return "bg-teal-500";
  } else if (type === ((_k = WalletCategoryTypes) == null ? void 0 : _k.goals)) {
    return "bg-rose-500";
  } else if (type === ((_l = WalletCategoryTypes) == null ? void 0 : _l.ids)) {
    return "bg-yellow-500";
  } else if (type === ((_m = WalletCategoryTypes) == null ? void 0 : _m.currency)) {
    return "bg-cyan-500";
  }
  return "bg-grayscale-900";
};

const BoostSmallCard = ({
  title = "Title Lorem Ipsum",
  customTitle,
  thumbImgSrc,
  customThumbClass = "",
  customHeaderClass = "",
  type = WalletCategoryTypes.achievements,
  className,
  onCheckClick,
  showChecked,
  checkStatus,
  arrowOnClick,
  buttonOnClick,
  customButtonComponent,
  customBodyClass,
  customBodyComponent,
  customThumbComponent,
  customDraftComponent,
  innerOnClick,
  issueHistory,
  bgImgSrc,
  optionsTriggerOnClick
}) => {
  var _a;
  const thumbClass = TYPE_TO_WALLET_DARK_COLOR[type] ? `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}` : "bg-grayscale-50";
  const defaultThumbClass = `small-boost-card-thumb flex h-[110px] w-[110px] my-[10px] mx-auto ${thumbClass} overflow-hidden flex-col justify-center items-center rounded-full ${customThumbClass}`;
  const imgSrc = (thumbImgSrc == null ? void 0 : thumbImgSrc.trim()) !== "" ? thumbImgSrc : TYPE_TO_IMG_SRC[type];
  const headerBgColor = getDarkBGColor(type);
  const checkBtnClass = checkStatus ? "generic-vc-card checked" : "generic-vc-card unchecked";
  const defaultHeaderClass = `flex generic-card-title w-full justify-center ${customHeaderClass}`;
  const defaultBodyClass = ` boost-small-card-body flex justify-center items-center text-center text-[14px] overflow-hidden text-grayscale-500 py-[5px] px-[10px] ${customBodyClass}`;
  const defaultButtonClass = `cursor-pointer small-boost-boost-btn flex boost-btn-click rounded-[40px] w-[140px] h-[48px] text-white flex justify-center items-center ${headerBgColor}`;
  const innerClickContainerClass = `relative cursor-pointer boost-small-card inner-click-container z-10`;
  const issueHistoryDisplay = issueHistory && (issueHistory == null ? void 0 : issueHistory.length) > 3 ? issueHistory == null ? void 0 : issueHistory.slice(0, 3) : issueHistory;
  const renderIssueHistory = issueHistoryDisplay == null ? void 0 : issueHistoryDisplay.map((issueItem) => {
    return /* @__PURE__ */ React.createElement("div", {
      key: issueItem == null ? void 0 : issueItem.id,
      className: "profile-thumb-img border-[1px] border-white border-solid  vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden mx-[-5px]"
    }, /* @__PURE__ */ React.createElement("img", {
      className: "h-full w-full object-cover",
      src: (issueItem == null ? void 0 : issueItem.thumb) || DefaultFace,
      alt: "profile"
    }));
  });
  const handleInnerClick = () => {
    innerOnClick == null ? void 0 : innerOnClick();
  };
  const handleOptionsClick = () => {
    optionsTriggerOnClick == null ? void 0 : optionsTriggerOnClick();
  };
  return /* @__PURE__ */ React.createElement("div", {
    className: `flex generic-display-card-simple bg-white flex-col shadow-bottom relative $ py-[0px] px-[0px] w-[160px] h-[280px] rounded-[20px] overflow-hidden ${className}`
  }, optionsTriggerOnClick && /* @__PURE__ */ React.createElement("section", {
    className: "absolute cursor-pointer h-[30px] w-[30px] top-[5px] right-[5px] rounded-full overflow-hidden z-20 bg-white flex items-center justify-center",
    onClick: handleOptionsClick
  }, /* @__PURE__ */ React.createElement("img", {
    alt: "Menu dropdown icon",
    className: "h-[20px] w-[20px] object-cover overflow-hidden",
    src: ThreeDots
  })), bgImgSrc && /* @__PURE__ */ React.createElement("section", {
    className: "absolute top-[-50px]  shadow-bottom left-[0px] rounded-b-full overflow-hidden z-0 mt-3"
  }, /* @__PURE__ */ React.createElement("img", {
    className: "h-full w-full object-cover overflow-hidden",
    src: bgImgSrc
  })), /* @__PURE__ */ React.createElement("div", {
    className: innerClickContainerClass,
    onClick: handleInnerClick
  }, customThumbComponent && customThumbComponent, !customThumbComponent && /* @__PURE__ */ React.createElement("section", {
    className: defaultThumbClass
  }, thumbImgSrc && (thumbImgSrc == null ? void 0 : thumbImgSrc.trim()) !== "" && /* @__PURE__ */ React.createElement("img", {
    className: "generic-display-card-img h-full w-full  w-[110px] h-[110px] rounded-full object-cover overflow-hidden",
    src: thumbImgSrc != null ? thumbImgSrc : "",
    alt: "Credential Achievement Image"
  }), (!thumbImgSrc || (thumbImgSrc == null ? void 0 : thumbImgSrc.trim()) === "") && /* @__PURE__ */ React.createElement("img", {
    className: "max-w-[110px] w-full h-full p-[0px] object-cover  rounded-full",
    src: imgSrc
  })), customTitle && customTitle, !customTitle && /* @__PURE__ */ React.createElement("section", {
    className: defaultHeaderClass
  }, /* @__PURE__ */ React.createElement("p", {
    className: "relative z-[100] small-boost-title text-[16px] leading-[130%] p-[0px] font-medium text-center line-clamp-2"
  }, title)), /* @__PURE__ */ React.createElement("section", {
    className: defaultBodyClass
  }, customBodyComponent && customBodyComponent, !customBodyComponent && issueHistory && (issueHistory == null ? void 0 : issueHistory.length) > 0 && renderIssueHistory, !customBodyComponent && issueHistory && (issueHistory == null ? void 0 : issueHistory.length) > 3 && /* @__PURE__ */ React.createElement("span", {
    className: "small-boost-issue-count ml-[10px] font-semibold"
  }, "+", (issueHistory == null ? void 0 : issueHistory.length) - 3))), /* @__PURE__ */ React.createElement("section", {
    className: "small-boost-card-footer flex justify-center items-center absolute bottom-[15px] w-full"
  }, customButtonComponent && customButtonComponent, !customButtonComponent && /* @__PURE__ */ React.createElement("div", {
    className: "flex w-full flex-col items-center justify-center"
  }, customDraftComponent && customDraftComponent, /* @__PURE__ */ React.createElement("div", {
    onClick: buttonOnClick,
    className: defaultButtonClass
  }, /* @__PURE__ */ React.createElement("img", {
    className: "h-[25px] mr-[7px] text-",
    src: AddAwardLight
  }), /* @__PURE__ */ React.createElement("span", {
    className: "font-mouse text-[25px] tracking-wider"
  }, "BOOST")))), showChecked && /* @__PURE__ */ React.createElement("div", {
    className: "check-btn-overlay absolute top-[5px] left-[5px]"
  }, /* @__PURE__ */ React.createElement(CircleCheckButton, {
    checked: checkStatus,
    onClick: onCheckClick,
    className: checkBtnClass
  })), arrowOnClick && /* @__PURE__ */ React.createElement("button", {
    type: "button",
    onClick: arrowOnClick,
    className: "arrow-btn-overlay absolute top-[52px] right-[2px]"
  }, /* @__PURE__ */ React.createElement("img", {
    className: "h-full w-full object-contai",
    src: (_a = CaretRightFilled) != null ? _a : "",
    alt: "Right Caret"
  })));
};

export { BoostSmallCard as B };
//# sourceMappingURL=BoostSmallCard-5d47a19f.js.map
