'use strict';

var React = require('react');
var index$1 = require('./index-5488badc.js');
var index = require('./index-08002ab6.js');
var ThreeDots = require('./DotsThreeOutline.svg');
var CertDisplayCardSkillsCount = require('./CertDisplayCardSkillsCount-31211da4.js');
var CircleCheckButton = require('./CircleCheckButton-82d47ee2.js');

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

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

const BoostGenericCard = ({
  title,
  customTitle,
  thumbImgSrc,
  customThumbClass = "",
  customHeaderClass = "",
  type = index$1.WalletCategoryTypes.achievements,
  className,
  onCheckClick,
  showChecked,
  checkStatus,
  customThumbComponent,
  innerOnClick,
  bgImgSrc,
  issuerName,
  customIssuerName,
  dateDisplay,
  customDateDisplay,
  optionsTriggerOnClick,
  verifierBadge,
  credential,
  isInSkillsModal
}) => {
  var _a;
  const thumbClass = index.TYPE_TO_WALLET_DARK_COLOR[type] ? `bg-${index.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 : index.TYPE_TO_IMG_SRC[type];
  index.TYPE_TO_WALLET_DARK_COLOR[type] ? `bg-${index.TYPE_TO_WALLET_DARK_COLOR[type]}` : "bg-grayscale-900";
  const checkBtnClass = checkStatus ? "generic-vc-card checked" : "generic-vc-card unchecked";
  const defaultHeaderClass = `flex generic-card-title w-full justify-center ${customHeaderClass}`;
  const handleInnerClick = () => {
    innerOnClick == null ? void 0 : innerOnClick();
  };
  const handleOptionsClick = () => {
    optionsTriggerOnClick == null ? void 0 : optionsTriggerOnClick();
  };
  return /* @__PURE__ */ React__default["default"].createElement("div", {
    className: `flex generic-display-card-simple bg-white flex-col shadow-bottom relative $ py-[0px] px-[0px] w-[160px] h-[250px] rounded-[20px] overflow-hidden ${className}`
  }, optionsTriggerOnClick && /* @__PURE__ */ React__default["default"].createElement("section", {
    className: "absolute cursor-pointer shadow-bottom 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__default["default"].createElement("img", {
    alt: "Menu dropdown icon",
    className: "h-[20px] w-[20px] object-cover overflow-hidden",
    src: ThreeDots__default["default"]
  })), bgImgSrc && /* @__PURE__ */ React__default["default"].createElement("section", {
    className: "absolute top-[-50px] shadow-bottom left-[0px] rounded-b-full overflow-hidden z-0 mt-3"
  }, /* @__PURE__ */ React__default["default"].createElement("img", {
    className: "h-full w-full object-cover overflow-hidden",
    src: bgImgSrc
  })), /* @__PURE__ */ React__default["default"].createElement("button", {
    type: "button",
    className: "boost-small-card inner-click-container z-10",
    onClick: handleInnerClick
  }, customThumbComponent && customThumbComponent, !customThumbComponent && /* @__PURE__ */ React__default["default"].createElement("section", {
    className: defaultThumbClass
  }, thumbImgSrc && (thumbImgSrc == null ? void 0 : thumbImgSrc.trim()) !== "" && /* @__PURE__ */ React__default["default"].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__default["default"].createElement("img", {
    className: "max-w-[110px] w-full h-full p-[0px] object-cover rounded-full",
    src: imgSrc
  })), /* @__PURE__ */ React__default["default"].createElement("section", {
    className: "boost-generic-info-section"
  }, !customTitle && /* @__PURE__ */ React__default["default"].createElement("div", {
    className: `${defaultHeaderClass} items-center`
  }, /* @__PURE__ */ React__default["default"].createElement("p", {
    className: "relative z-[100] small-boost-title text-[16px] leading-[130%] px-[0px] font-medium text-center text-grayscale-900 line-clamp-2 max-w-full"
  }, title)), customTitle && customTitle, customIssuerName && customIssuerName, !customIssuerName && /* @__PURE__ */ React__default["default"].createElement("span", {
    className: "flex items-center justify-center small-generic-boost-issuer-name line-clamp-1 text-[12px] text-grayscale-700 px-[6px]"
  }, "by ", /* @__PURE__ */ React__default["default"].createElement("span", {
    className: "font-bold whitespace-pre"
  }, " ", issuerName)), customDateDisplay && customDateDisplay, !customDateDisplay && /* @__PURE__ */ React__default["default"].createElement("p", {
    className: "small-generic-boost-date-display line-clamp-1 text-[12px] text-grayscale-700  px-[7px]"
  }, dateDisplay), /* @__PURE__ */ React__default["default"].createElement("div", {
    className: "boost-verifier-badge-display"
  }, verifierBadge), isInSkillsModal && /* @__PURE__ */ React__default["default"].createElement(CertDisplayCardSkillsCount.CertDisplayCardSkillsCount, {
    skills: (_a = credential == null ? void 0 : credential.skills) != null ? _a : [],
    onClick: handleInnerClick,
    className: "boost-generic",
    isInSkillsModal
  })), showChecked && /* @__PURE__ */ React__default["default"].createElement("div", {
    className: "check-btn-overlay absolute top-[5px] left-[5px]"
  }, /* @__PURE__ */ React__default["default"].createElement(CircleCheckButton.CircleCheckButton, {
    checked: checkStatus,
    onClick: onCheckClick,
    className: checkBtnClass
  }))));
};

exports.BoostGenericCard = BoostGenericCard;
//# sourceMappingURL=BoostGenericCard-b442b683.js.map
