import React, { useState, useEffect } from 'react';
import { I as InfoIcon, c as capitalize, E as ExclamationPoint, A as AcuteCheckmark, g as getBaseUrl, b as VideoIcon, C as Camera, G as GenericDocumentIcon, L as LinkIcon, p as prettyBytes, d as LeftArrow, e as SkillsBox, R as RoundedCorner, f as IssuerSeal, i as isAppDidWeb, V as VERIFIER_STATES, h as Line, a as VerifierStateBadgeAndText, F as FatArrow } from './VerifierStateBadgeAndText-6d33089b.js';
import { g as getTotalCountOfSkills, c as categorizeSkills, a as getColorForVerificationStatus, b as getInfoFromCredential, d as getCategoryDarkColor, e as getCategoryLightColor, f as getCategoryIcon, h as getNameFromProfile, i as getImageFromProfile } from './credential.helpers-30058000.js';
import { P as PuzzlePiece } from './PuzzlePiece-a3d9cc62.js';
import { U as UserProfilePicture } from './UserProfilePicture-7b950437.js';
import { a as LCCategoryEnum } from './index-28917993.js';
import { V as VerificationStatusEnum } from './types.esm-f58818d5.js';
import { X, L as Lightbox } from './Lightbox-f0338a0c.js';
import CaretRightFilled from './CaretRightFilled.svg';
import ThreeDots from './DotsThreeOutline.svg';

const AlignmentRow = ({
  url,
  name,
  framework
}) => {
  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-[5px] font-poppins text-[12px] bg-[#DBEAFE] rounded-[15px] border-b-[1px] border-grayscale-200 border-solid w-full p-[10px] last:border-0" }, /* @__PURE__ */ React.createElement("h1", { className: "text-blue-800 font-semibold uppercase" }, framework), /* @__PURE__ */ React.createElement("button", { className: "flex", onClick: () => window.open(url) }, /* @__PURE__ */ React.createElement("span", { className: "text-left" }, name), /* @__PURE__ */ React.createElement("img", { className: "w-[20px] self-end", src: CaretRightFilled, alt: "right-caret" })));
};

const InfoBox = ({ text, handleClose, backgroundColor = "#6366F1" }) => {
  const bgColorWithOpacity = `${backgroundColor}1F`;
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: "info-box p-[10px] rounded-[10px] w-full font-poppins text-[12px] leading[18px]",
      style: { backgroundColor: bgColorWithOpacity }
    },
    text,
    " ",
    /* @__PURE__ */ React.createElement(
      "button",
      {
        onClick: (e) => {
          e.stopPropagation();
          handleClose();
        },
        className: "text-indigo-500 font-[700] select-none"
      },
      "Close"
    )
  );
};

const AlignmentsBox = ({ alignment, style }) => {
  const [showInfo, setShowInfo] = useState(false);
  const alignmentText = `
    Alignments in your Open Badge credential link your achievement to established frameworks, standards, or competencies. 
    Each alignment shows how your boost directly relates to skills, knowledge areas, and professional standards that are recognized in your field.
    `;
  const alignments = Array.isArray(alignment) ? alignment.map((object, index) => /* @__PURE__ */ React.createElement(
    AlignmentRow,
    {
      key: index,
      url: object.targetUrl,
      name: object.targetName,
      framework: object.targetFramework
    }
  )) : alignment && /* @__PURE__ */ React.createElement(
    AlignmentRow,
    {
      url: alignment.targetUrl,
      name: alignment.targetName,
      framework: alignment.targetFramework
    }
  );
  return /* @__PURE__ */ React.createElement("div", { className: "bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom p-[15px] w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center" }, /* @__PURE__ */ React.createElement(
    "h3",
    {
      className: style === "Certificate" ? "text-[17px] text-grayscale-900 font-poppins" : "text-[22px] font-mouse"
    },
    "Alignments"
  ), /* @__PURE__ */ React.createElement(
    "button",
    {
      className: "ml-auto",
      onClick: (e) => {
        e.stopPropagation();
        setShowInfo(!showInfo);
      }
    },
    /* @__PURE__ */ React.createElement(InfoIcon, { color: showInfo ? "#6366F1" : void 0 })
  )), showInfo && /* @__PURE__ */ React.createElement(InfoBox, { text: alignmentText, handleClose: () => setShowInfo(false) }), alignments);
};

const CertDisplayCardSkillsCount = ({ skills, onClick, className, isInSkillsModal }) => {
  const skillsCount = getTotalCountOfSkills(skills);
  if (skillsCount === 0) return /* @__PURE__ */ React.createElement(React.Fragment, null);
  const skillsMap = categorizeSkills(skills);
  const totalSkills = Object.values(skillsMap).reduce(
    (total2, category) => total2 + (category == null ? void 0 : category.length),
    0
  );
  const totalSubskills = Object.values(skillsMap).reduce(
    (total2, category) => total2 + ((category == null ? void 0 : category.totalSubskillsCount) || 0),
    0
  );
  const total = totalSkills + totalSubskills;
  const text = total !== 1 ? "Skills" : "Skill";
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: `flex w-full items-center justify-center cursor-pointer bg-white rounded-[20px] ${className === "boost-generic" ? "" : "px-4 py-2 mt-4"} `,
      onClick
    },
    /* @__PURE__ */ React.createElement(
      "div",
      {
        className: `text-violet-500 flex items-center justify-center tracking-[0.75px] font-poppins font-semibold ${className === "boost-generic" ? "text-[12px] mt-[5px]" : "text-sm"}`
      },
      isInSkillsModal ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "bg-violet-500 rounded-full flex items-center justify-center mr-[5px] p-1 h-[20px] w-[20px]" }, /* @__PURE__ */ React.createElement(PuzzlePiece, { className: "text-white", fill: "#fff" })), "+", total, " ", text) : /* @__PURE__ */ React.createElement(React.Fragment, null, "+", total, " ", text, /* @__PURE__ */ React.createElement("div", { className: "bg-violet-500 rounded-full flex items-center justify-center ml-2 p-1 h-[30px] w-[30px]" }, /* @__PURE__ */ React.createElement(PuzzlePiece, { className: "text-white", fill: "#fff" })))
    )
  );
};

const VerificationRow = ({ verification }) => {
  var _a, _b;
  const [showInfo, setShowInfo] = useState(false);
  const statusColor = getColorForVerificationStatus(verification.status);
  const getIcon = () => {
    switch (verification.status) {
      case VerificationStatusEnum.Success:
        return /* @__PURE__ */ React.createElement(AcuteCheckmark, null);
      case VerificationStatusEnum.Error:
        return /* @__PURE__ */ React.createElement(ExclamationPoint, null);
      case VerificationStatusEnum.Failed:
        return /* @__PURE__ */ React.createElement(X, { className: "w-[15px] h-[15px]" });
    }
  };
  let primaryText = verification.check ? `${verification.check}: ${verification.message}` : verification.message;
  if (verification.status === VerificationStatusEnum.Failed) {
    primaryText = (_b = (_a = verification.message) != null ? _a : verification.details) != null ? _b : "";
  }
  primaryText = capitalize(primaryText);
  const infoText = "";
  return /* @__PURE__ */ React.createElement("div", { className: "verification-row flex flex-col gap-[5px] font-poppins border-b-[1px] border-grayscale-200 border-solid w-full py-[10px] last:border-0 last:pb-0" }, /* @__PURE__ */ React.createElement(
    "span",
    {
      className: "font-[700] text-[11px] uppercase flex items-center gap-[3px] select-none",
      style: { color: statusColor }
    },
    getIcon(),
    verification.status,
    infoText 
  ), showInfo && infoText && /* @__PURE__ */ React.createElement(
    InfoBox,
    {
      text: infoText,
      handleClose: () => setShowInfo(false),
      backgroundColor: statusColor
    }
  ), /* @__PURE__ */ React.createElement("span", { className: "text-[14px] text-grayscale-900 font-poppins" }, primaryText));
};

const VerificationsBox = ({ verificationItems }) => {
  const [showInfo, setShowInfo] = useState(false);
  return /* @__PURE__ */ React.createElement("div", { className: "bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom p-[15px] w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center" }, /* @__PURE__ */ React.createElement("h3", { className: "text-[17px] text-grayscale-900 font-poppins" }, "Verifications"), /* @__PURE__ */ React.createElement(
    "button",
    {
      className: "ml-auto",
      onClick: (e) => {
        e.stopPropagation();
        setShowInfo(!showInfo);
      }
    },
    /* @__PURE__ */ React.createElement(InfoIcon, { color: showInfo ? "#6366F1" : void 0 })
  )), showInfo && /* @__PURE__ */ React.createElement(
    InfoBox,
    {
      text: "Credential verifications check the cryptographic proof of digital credentials to ensure their authenticity and accuracy.",
      handleClose: () => setShowInfo(false)
    }
  ), verificationItems.map((verification, index) => /* @__PURE__ */ React.createElement(VerificationRow, { key: index, verification })));
};

const TruncateTextBox = ({
  headerText,
  headerClassName = "",
  text,
  truncateThreshold = 132,
  children,
  className = "truncate-text-box"
}) => {
  const needsTruncate = (text == null ? void 0 : text.length) > truncateThreshold;
  const [showFullText, setShowFullText] = useState(false);
  const truncated = needsTruncate && !showFullText;
  const displayText = truncated ? text.substring(0, truncateThreshold) : text;
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: `${className} w-full bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom p-[15px]`
    },
    /* @__PURE__ */ React.createElement("h3", { className: `${headerClassName} text-[17px] text-grayscale-900 font-poppins` }, headerText),
    /* @__PURE__ */ React.createElement("p", { className: "text-[12px] text-grayscale-700 font-poppins mb-0 flex flex-col items-start" }, displayText, truncated && /* @__PURE__ */ React.createElement(React.Fragment, null, "...", /* @__PURE__ */ React.createElement(
      "button",
      {
        className: "text-indigo-500 text-[12px]",
        onClick: (e) => {
          e.stopPropagation();
          setShowFullText(true);
        }
      },
      "Show more"
    )), needsTruncate && showFullText && /* @__PURE__ */ React.createElement(
      "button",
      {
        className: "text-indigo-500 text-[12px]",
        onClick: (e) => {
          e.stopPropagation();
          setShowFullText(false);
        }
      },
      "Show less"
    )),
    children
  );
};

var __async = (__this, __arguments, generator) => {
  return new Promise((resolve, reject) => {
    var fulfilled = (value) => {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    };
    var rejected = (value) => {
      try {
        step(generator.throw(value));
      } catch (e) {
        reject(e);
      }
    };
    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
    step((generator = generator.apply(__this, __arguments)).next());
  });
};
const defaultGetFileMetadata = (url) => __async(null, null, function* () {
  var _a;
  console.log({ url });
  const isFilestack = url.includes("filestack");
  if (!isFilestack) return;
  const urlParams = (_a = url.split(".com/")[1]) == null ? void 0 : _a.split("/");
  if (!urlParams) return;
  const handle = urlParams[urlParams.length - 1];
  let fetchFailed = false;
  const data = yield fetch(`https://cdn.filestackcontent.com/${handle}/metadata`).then((res) => res.json()).catch(() => fetchFailed = true);
  if (fetchFailed) return;
  const fileExtension = data.filename.split(".")[1];
  return {
    fileExtension,
    sizeInBytes: data.size,
    numberOfPages: void 0
  };
});
const isYoutubeUrl = (url) => {
  const youtubeUrl = new URL(url);
  return youtubeUrl.hostname === "www.youtube.com";
};
const getYoutubeVideoId = (url) => {
  const regex = /(?:\?v=|\.com\/embed\/)([^&]+)/;
  const match = url.match(regex);
  return match ? match[1] : "";
};
const getCoverImageUrl = (youtubeWatchUrl) => {
  if (!isYoutubeUrl(youtubeWatchUrl)) {
    return "";
  }
  const videoId = getYoutubeVideoId(youtubeWatchUrl);
  return videoId ? `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg` : "";
};
const defaultGetVideoMetadata = (url) => __async(null, null, function* () {
  const isYoutube = isYoutubeUrl(url);
  if (!isYoutube) return;
  const metadataUrl = `http://youtube.com/oembed?url=${url}&format=json`;
  let fetchFailed = false;
  const metadata = yield fetch(metadataUrl).then((res) => res.json()).catch(() => fetchFailed = true);
  const coverImageUrl = getCoverImageUrl(url);
  if (fetchFailed) return { imageUrl: coverImageUrl };
  return {
    title: metadata.title,
    imageUrl: coverImageUrl,
    videoLength: ""
    // TODO figure out how to get this
  };
});
const MediaAttachmentsBox = ({
  attachments,
  getFileMetadata = defaultGetFileMetadata,
  getVideoMetadata = defaultGetVideoMetadata,
  onMediaAttachmentClick,
  enableLightbox = false
}) => {
  const [documentMetadata, setDocumentMetadata] = useState({});
  const [videoMetadata, setVideoMetadata] = useState({});
  const mediaAttachments = [];
  const documentsAndLinks = [];
  attachments.forEach((a) => {
    switch (a.type) {
      case "document":
      case "link":
        documentsAndLinks.push(a);
        break;
      case "photo":
      case "video":
        mediaAttachments.push(a);
        break;
    }
  });
  useEffect(() => {
    const getMetadata = (attachments2) => __async(null, null, function* () {
      const docMetadata = {};
      const videoMetadata2 = {};
      yield Promise.all(
        attachments2.map((attachment) => __async(null, null, function* () {
          if (attachment.type === "document") {
            docMetadata[attachment.url] = yield getFileMetadata(attachment.url);
          } else if (attachment.type === "video") {
            videoMetadata2[attachment.url] = yield getVideoMetadata(attachment.url);
          }
        }))
      );
      setVideoMetadata(videoMetadata2);
      setDocumentMetadata(docMetadata);
    });
    const videos = attachments.filter((a) => a.type === "video");
    getMetadata([...documentsAndLinks, ...videos]);
  }, []);
  const [currentLightboxUrl, setCurrentLightboxUrl] = useState(void 0);
  const lightboxItems = mediaAttachments.filter(
    (a) => a.type === "photo" || a.type === "video"
  );
  const handleMediaAttachmentClick = (url, type) => {
    if (type === "photo" || type === "video") {
      setCurrentLightboxUrl(url);
    }
    onMediaAttachmentClick == null ? void 0 : onMediaAttachmentClick(url, type);
  };
  return /* @__PURE__ */ React.createElement("div", { className: "bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full" }, /* @__PURE__ */ React.createElement("h3", { className: "text-[17px] text-grayscale-900 font-poppins" }, "Attachments"), mediaAttachments.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "flex gap-[5px] justify-between flex-wrap w-full" }, enableLightbox && /* @__PURE__ */ React.createElement(
    Lightbox,
    {
      items: lightboxItems,
      currentUrl: currentLightboxUrl,
      setCurrentUrl: setCurrentLightboxUrl
    }
  ), mediaAttachments.map((media, index) => {
    var _a, _b;
    let innerContent;
    let title = media.title;
    if (media.type === "video") {
      const metadata = videoMetadata[media.url];
      title = (_a = title || (metadata == null ? void 0 : metadata.title)) != null ? _a : "";
      getBaseUrl(media.url);
      innerContent = /* @__PURE__ */ React.createElement(
        "div",
        {
          className: "bg-cover bg-no-repeat bg-center relative font-poppins text-white text-[12px] font-[400] leading-[17px] flex flex-col justify-end items-start p-[10px] text-left bg-rose-600 rounded-[15px] h-full",
          style: {
            backgroundImage: (metadata == null ? void 0 : metadata.imageUrl) ? `linear-gradient(180deg, rgba(0, 0, 0, 0) 44.20%, rgba(0, 0, 0, 0.6) 69%), url(${(_b = metadata == null ? void 0 : metadata.imageUrl) != null ? _b : ""})` : void 0
          }
        },
        !(metadata == null ? void 0 : metadata.imageUrl) && /* @__PURE__ */ React.createElement(VideoIcon, { size: "60", className: "m-auto" }),
        /* @__PURE__ */ React.createElement("div", { className: "absolute bottom-[10px] left-[10px] z-10 flex items-center gap-[5px]" }, (metadata == null ? void 0 : metadata.imageUrl) && /* @__PURE__ */ React.createElement(VideoIcon, null), (metadata == null ? void 0 : metadata.videoLength) && /* @__PURE__ */ React.createElement("span", { className: "leading-[23px]" }, metadata.videoLength))
      );
    } else {
      innerContent = /* @__PURE__ */ React.createElement("div", { className: "h-full w-full flex items-center justify-center" }, /* @__PURE__ */ React.createElement("img", { className: "object-cover h-full w-full", src: media.url }), /* @__PURE__ */ React.createElement(Camera, { className: "absolute bottom-[10px] left-[10px] z-10" }));
    }
    const className = `media-attachment ${media.type} w-[49%] pt-[49%] overflow-hidden relative`;
    if (onMediaAttachmentClick || enableLightbox) {
      return /* @__PURE__ */ React.createElement(
        "div",
        {
          key: index,
          className: "flex bg-grayscale-100 items-center rounded-[15px] w-full"
        },
        /* @__PURE__ */ React.createElement(
          "button",
          {
            className: "relative h-[80px] w-[80px] rounded-[15px] overflow-hidden flex-shrink-0",
            onClick: (e) => {
              e.stopPropagation();
              handleMediaAttachmentClick(media.url, media.type);
            }
          },
          innerContent
        ),
        title && /* @__PURE__ */ React.createElement("div", { className: "text-[12px] text-grayscale-900 font-poppins px-[10px] line-clamp-3" }, title)
      );
    }
    return /* @__PURE__ */ React.createElement("div", { key: index, className }, innerContent);
  })), documentsAndLinks.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "w-full flex flex-col gap-[5px]" }, documentsAndLinks.map((docOrLink, index) => {
    var _a;
    const metadata = docOrLink.type === "document" ? documentMetadata[docOrLink.url] : void 0;
    const { fileExtension, sizeInBytes, numberOfPages } = metadata != null ? metadata : {};
    let baseUrl = "";
    if (docOrLink.type === "link") {
      baseUrl = getBaseUrl(docOrLink.url);
    }
    const innerContent = /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-[5px]" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-[5px] items-center" }, docOrLink.type === "document" && /* @__PURE__ */ React.createElement(GenericDocumentIcon, { className: "shrink-0" }), docOrLink.type === "link" && /* @__PURE__ */ React.createElement(LinkIcon, { className: "shrink-0" }), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col w-full min-w-0" }, /* @__PURE__ */ React.createElement("span", { className: "text-grayscale-900 font-[400]" }, (_a = docOrLink.title) != null ? _a : "No title"), docOrLink.type === "document" && metadata && /* @__PURE__ */ React.createElement(
      "a",
      {
        href: docOrLink.url,
        target: "_blank",
        rel: "noreferrer",
        className: "text-grayscale-700 font-[500] text-[12px] font-poppins hover:underline",
        onClick: (e) => e.stopPropagation()
      },
      fileExtension && /* @__PURE__ */ React.createElement("span", { className: "uppercase" }, fileExtension),
      fileExtension && (numberOfPages || sizeInBytes) && " \u2022 ",
      numberOfPages && /* @__PURE__ */ React.createElement("span", null, numberOfPages, " page", numberOfPages === 1 ? "" : "s"),
      numberOfPages && sizeInBytes && " \u2022 ",
      sizeInBytes && /* @__PURE__ */ React.createElement("span", null, prettyBytes(sizeInBytes))
    ), docOrLink.type === "link" && /* @__PURE__ */ React.createElement(
      "a",
      {
        href: docOrLink.url,
        target: "_blank",
        rel: "noreferrer",
        className: "text-indigo-500 font-[500] text-[12px] font-poppins hover:underline",
        onClick: (e) => e.stopPropagation()
      },
      baseUrl
    ))));
    const className = `row-attachment ${docOrLink.type} bg-grayscale-100 rounded-[15px] p-[10px] w-full font-poppins text-[12px] leading-[18px] tracking-[-0.33px] text-left`;
    if (onMediaAttachmentClick) {
      return /* @__PURE__ */ React.createElement(
        "button",
        {
          key: index,
          className,
          onClick: (e) => {
            e.stopPropagation();
            handleMediaAttachmentClick(docOrLink.url, docOrLink.type);
          }
        },
        innerContent
      );
    }
    return /* @__PURE__ */ React.createElement("div", { key: index, className }, innerContent);
  })));
};

const CertificateBackFace = ({
  credential,
  categoryType,
  verificationItems,
  customSkillsComponent,
  getFileMetadata,
  getVideoMetadata,
  onMediaAttachmentClick,
  enableLightbox,
  showBackButton,
  handleViewFrontFace,
  customLinkedCredentialsComponent
}) => {
  var _a, _b, _c, _d, _e, _f, _g;
  const { createdAt, credentialSubject } = getInfoFromCredential(credential, "MMM dd, yyyy", {
    uppercaseDate: false
  });
  const { description } = (_a = credentialSubject == null ? void 0 : credentialSubject.achievement) != null ? _a : {};
  const criteria = (_c = (_b = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _b.criteria) == null ? void 0 : _c.narrative;
  const alignment = (_d = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _d.alignment;
  const credentialDarkColor = getCategoryDarkColor(categoryType);
  let bgColor = `bg-${credentialDarkColor}`;
  if (categoryType === LCCategoryEnum.accommodations) {
    bgColor = "bg-amber-700";
  } else if (categoryType === LCCategoryEnum.accomplishments) {
    bgColor = "bg-lime-700";
  }
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      role: "button",
      onClick: () => handleViewFrontFace == null ? void 0 : handleViewFrontFace(),
      className: `flex flex-col gap-[15px] items-center border-[5px] border-solid border-grayscale-200 py-[30px] px-[20px] rounded-[25px] max-w-[400px] ${bgColor}`
    },
    showBackButton ? /* @__PURE__ */ React.createElement("div", { className: "w-full" }, /* @__PURE__ */ React.createElement(
      "button",
      {
        className: "vc-card-back-button rounded-full h-[50px] px-[15px] flex items-center justify-center gap-[5px] z-50 text-[30px] text-white select-none",
        onClick: () => handleViewFrontFace == null ? void 0 : handleViewFrontFace()
      },
      /* @__PURE__ */ React.createElement(LeftArrow, { className: "text-white", size: "25" }),
      "Details"
    )) : /* @__PURE__ */ React.createElement("h1", { className: "text-white text-center text-[22px] font-jacques" }, "Details"),
    /* @__PURE__ */ React.createElement(TruncateTextBox, { headerText: "About", text: description }, /* @__PURE__ */ React.createElement(
      "span",
      {
        className: `text-grayscale-600 font-poppins text-[12px] font-[600] w-full ${description ? "pt-[10px] border-t-[1px] border-solid border-grayscale-200" : ""}`
      },
      "Awarded on ",
      createdAt
    )),
    criteria && /* @__PURE__ */ React.createElement(TruncateTextBox, { headerText: "Criteria", text: criteria }),
    customLinkedCredentialsComponent && customLinkedCredentialsComponent,
    ((_f = (_e = credential.skills) == null ? void 0 : _e.length) != null ? _f : 0) > 0 && (customSkillsComponent ? customSkillsComponent : /* @__PURE__ */ React.createElement(SkillsBox, { skills: (_g = credential.skills) != null ? _g : [] })),
    credential.attachments && credential.attachments.length > 0 && /* @__PURE__ */ React.createElement(
      MediaAttachmentsBox,
      {
        attachments: credential.attachments,
        getFileMetadata,
        getVideoMetadata,
        onMediaAttachmentClick,
        enableLightbox
      }
    ),
    alignment && /* @__PURE__ */ React.createElement(AlignmentsBox, { alignment, style: "Certificate" }),
    verificationItems && verificationItems.length > 0 && /* @__PURE__ */ React.createElement(VerificationsBox, { verificationItems }),
    /* @__PURE__ */ React.createElement("span", { className: "hidden bg-amber-700 bg-spice-700 bg-rose-700 bg-yellow-700 bg-teal-700" })
  );
};

const CertificateCornerIcon = ({
  categoryType,
  position
}) => {
  const credentialPrimaryColor = getCategoryLightColor(categoryType);
  const credentialIcon = getCategoryIcon(categoryType);
  let iconPositionClassName, cornerPositionClassName;
  switch (position) {
    case "top-left":
      iconPositionClassName = "top-0 left-0";
      cornerPositionClassName = "bottom-0 right-0";
      break;
    case "top-right":
      iconPositionClassName = "top-0 right-0";
      cornerPositionClassName = "bottom-0 left-0 rotate-90";
      break;
    case "bottom-left":
      iconPositionClassName = "bottom-0 left-0";
      cornerPositionClassName = "top-0 right-0 rotate-[270deg]";
      break;
    case "bottom-right":
      iconPositionClassName = "bottom-0 right-0";
      cornerPositionClassName = "top-0 left-0 rotate-180";
      break;
  }
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: `text-${credentialPrimaryColor} p-[11px] rounded-full bg-white absolute ${iconPositionClassName}`
    },
    credentialIcon,
    /* @__PURE__ */ React.createElement(RoundedCorner, { className: `absolute ${cornerPositionClassName}` })
  );
};

const CertificateRibbon = ({ className = "" }) => {
  return /* @__PURE__ */ React.createElement(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      width: "127",
      height: "122",
      viewBox: "0 0 127 122",
      fill: "none",
      className
    },
    /* @__PURE__ */ React.createElement(
      "path",
      {
        d: "M63.5 9.98744C90.9495 9.98744 113.189 32.3381 113.189 59.9243",
        stroke: "currentColor",
        strokeWidth: "4",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }
    ),
    /* @__PURE__ */ React.createElement(
      "path",
      {
        d: "M63.5 9.98744C36.0505 9.98744 13.8106 32.3381 13.8106 59.9243",
        stroke: "currentColor",
        strokeWidth: "4",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }
    ),
    /* @__PURE__ */ React.createElement(
      "path",
      {
        d: "M55.491 104.475C55.1125 104.097 54.5055 104.04 54.0701 104.362C52.9214 105.204 51.6864 105.96 50.3683 106.64C50.2425 106.447 50.1763 106.348 50.1134 106.245C47.4317 102.052 43.5904 100.199 38.613 100.66C37.498 100.766 37.131 101.424 37.5563 102.465C38.677 105.212 40.5754 107.235 43.2282 108.558C43.4046 108.648 43.5742 108.75 43.7473 108.842C43.7369 108.926 43.7297 109.012 43.7193 109.096C41.5496 109.26 39.3799 109.431 37.1668 109.598C37.1455 109.189 37.1366 108.972 37.121 108.756C36.7986 103.845 34.4102 100.368 29.9291 98.3574C29.0968 97.9817 28.3206 98.4055 28.1859 99.3093C27.8266 101.757 28.1853 104.098 29.2854 106.295C29.6092 106.94 30.0099 107.541 30.3738 108.166L30.2295 108.323C28.2988 107.413 26.3714 106.5 24.4407 105.59C24.5285 105.376 24.5253 105.346 24.5321 105.326C24.6164 105.149 24.704 104.975 24.7917 104.795C26.9222 100.459 26.5793 96.318 23.8895 92.3858C23.1409 91.2898 22.4169 91.2768 21.6142 92.3372C19.8137 94.7256 19.0461 97.4221 19.2515 100.387C19.2639 100.567 19.3364 100.746 19.3789 100.923C17.7117 99.3716 16.5828 97.581 15.4909 95.7469C14.3956 93.9162 14.4014 92.0933 15.1984 90.1898C15.4618 89.5553 15.7553 88.9173 16.1286 88.3456C16.912 87.1453 17.8815 86.1241 19.2566 85.3674C19.2138 87.2538 18.6952 88.8726 17.7401 90.357C17.5014 90.7281 17.2027 91.0662 16.9772 91.4506C16.6609 91.9854 16.7184 92.5049 17.2002 92.9058C17.662 93.2934 18.2797 93.2203 18.7324 92.7615C18.8901 92.6041 19.0344 92.4334 19.1621 92.2528C21.0404 89.6474 21.7989 86.761 21.3977 83.5938C21.2758 82.6213 20.5707 82.165 19.7242 82.6257C18.5163 83.2816 17.3215 83.9974 16.2462 84.8392C14.8493 85.9359 13.9242 87.4368 13.1186 89.0571C12.8817 87.722 12.7449 86.393 12.5781 85.0675C12.5171 84.5713 12.6558 84.2007 13.0048 83.8124C16.7866 79.5579 17.5303 73.6356 14.9217 68.8332C14.4654 67.989 13.5019 67.8439 12.8011 68.5105C8.84164 72.2727 7.56188 77.961 9.63892 82.9694C10.1071 84.1001 10.4018 85.2117 10.4758 86.4243C10.547 87.5404 10.765 88.6423 10.9259 89.8279C8.25967 87.8684 5.35751 87.0464 2.11879 87.4692C0.946856 87.6183 0.600078 88.2366 1.05508 89.3274C2.97731 93.9333 7.56118 96.7496 12.6214 96.4044C13.052 96.3723 13.4512 96.6036 13.6595 96.9791C14.2284 97.996 14.8473 98.9893 15.5166 99.9457C16.1659 100.876 16.8989 101.748 17.5985 102.648C17.5415 102.692 17.5214 102.718 17.5014 102.718C17.3546 102.713 17.2078 102.7 17.0611 102.687C14.206 102.455 11.5964 103.178 9.21265 104.783C8.55309 105.229 8.00006 105.722 8.14237 106.621L8.86947 107.347C8.91615 107.354 8.97293 107.343 9.01284 107.37C13.5125 110.336 18.0571 110.34 22.6628 107.465C22.8603 107.341 23.2505 107.382 23.4869 107.491C25.441 108.384 27.385 109.314 29.3291 110.231C29.4722 110.3 29.6254 110.353 29.8918 110.465C29.6042 110.593 29.427 110.664 29.2598 110.744C26.5104 112.051 24.5082 114.084 23.2831 116.866C22.8173 117.928 23.1945 118.573 24.3482 118.714C29.3469 119.332 34.1344 116.792 36.416 112.272C36.6587 111.79 36.9294 111.706 37.4267 111.68C39.5628 111.563 41.6959 111.369 43.8289 111.195C44.0359 111.18 44.2396 111.143 44.5434 111.105C42.5449 113.737 41.6565 116.574 41.9476 119.739C42.0458 120.788 42.9706 121.35 43.947 120.932C48.5281 118.969 51.3938 114.416 51.1384 109.439C51.1143 108.932 51.2291 108.665 51.7008 108.406C52.8251 107.787 53.9096 107.095 54.9842 106.394C55.0947 106.323 55.2018 106.249 55.3123 106.172C55.8849 105.773 55.9624 104.959 55.4777 104.475L55.491 104.475ZM13.4514 71.2499C15.0126 73.9881 14.0295 79.7449 11.6834 81.8228C10.1082 79.2113 11.0479 73.4581 13.4514 71.2499ZM11.4749 106.124C13.6717 104.534 18.1698 104.505 20.4741 106.103C17.9468 107.725 13.4055 107.718 11.4749 106.124ZM11.7151 94.1395C8.83431 94.3839 4.67541 91.9919 3.89616 89.6864C6.58027 89.4064 10.0706 91.3785 11.7151 94.1395ZM22.7731 94.7808C24.2992 97.859 24.3009 100.848 22.7574 103.909C21.068 102.114 21.073 97.122 22.7731 94.7808ZM26.0112 116.469C27.9507 113.617 30.5409 112.111 33.9287 111.911C33.09 114.141 29.1897 116.743 26.0112 116.469ZM34.814 109.03C32.284 107.837 30.1144 104.002 30.3552 101.221C32.5267 102.017 35.0569 105.83 34.814 109.03ZM44.261 118.184C43.9235 115.636 46.1413 111.85 48.8045 110.423C49.2003 112.668 47.0536 116.901 44.261 118.184ZM48.1917 107.521C44.6993 107.308 42.1343 105.778 40.2866 102.955C42.3744 102.481 46.6558 104.399 48.1917 107.521Z",
        fill: "currentColor"
      }
    ),
    /* @__PURE__ */ React.createElement(
      "path",
      {
        d: "M103.526 107.542C103.988 107.307 104.265 107.285 104.694 107.567C109.034 110.397 114.248 110.246 118.373 107.197C119.194 106.591 119.228 105.835 118.427 105.195C116.813 103.894 114.967 103.085 112.921 102.812C111.809 102.664 110.678 102.688 109.517 102.636C109.696 102.417 109.892 102.201 110.054 101.965C111.197 100.322 112.364 98.6946 113.457 97.0139C113.748 96.5622 113.984 96.3801 114.541 96.4194C119.617 96.7604 124.261 93.8706 126.123 89.2515C126.509 88.2904 126.155 87.559 125.134 87.5208C123.789 87.4643 122.425 87.4611 121.098 87.6413C119.304 87.8859 117.727 88.7313 116.278 89.8038C116.459 88.0288 116.631 86.3037 116.83 84.5787C116.852 84.3688 116.998 84.1763 117.094 83.9802C119.641 78.8979 118.638 72.8222 114.591 68.7677C113.455 67.6327 112.775 67.7294 112.068 69.1388C109.649 73.9584 110.464 79.6867 114.154 83.8627C114.328 84.0568 114.583 84.3113 114.567 84.5211C114.458 86.0366 114.292 87.5419 114.139 89.0538C114.069 89.0502 113.995 89.0498 113.922 89.0495C113.841 88.8758 113.764 88.6988 113.679 88.5218C112.348 85.8199 110.317 83.8576 107.542 82.6714C106.54 82.24 105.864 82.5933 105.749 83.639C105.292 87.8784 106.637 91.4434 109.907 94.258C110.463 94.7338 111.079 95.1432 111.702 95.6061C110.687 97.5704 109.468 99.3571 107.941 100.982C107.887 100.875 107.867 100.855 107.867 100.835C107.873 100.689 107.886 100.542 107.898 100.396C108.097 97.3513 107.296 94.5953 105.393 92.1704C104.846 91.4714 103.975 91.4639 103.451 92.1677C102.928 92.8716 102.477 93.5824 102.111 94.3504C101.084 96.4812 100.768 98.7454 101.133 101.1C101.243 101.806 101.769 102.219 102.415 102.162C102.989 102.111 103.393 101.574 103.367 100.89C103.359 100.67 103.318 100.45 103.297 100.23C103.134 98.3303 103.459 96.5393 104.425 94.8047C104.533 94.9518 104.603 95.0154 104.64 95.0989C106.059 98.0545 106.06 100.987 104.552 103.885C104.456 104.068 104.237 104.326 104.075 104.456C101.951 106.095 99.5845 107.293 97.0398 108.147C96.9665 108.173 96.873 108.146 96.7462 108.139C98.6351 105.516 99.412 102.651 98.9929 99.4732C98.8371 98.2963 98.2082 97.9267 97.1428 98.3948C93.4875 100.01 91.1922 102.764 90.3103 106.665C90.1078 107.564 90.0656 108.496 89.9241 109.602C87.7548 109.432 85.5787 109.255 83.3994 109.081C83.399 108.994 83.3985 108.908 83.3948 108.824C83.5845 108.728 83.7776 108.636 83.9706 108.537C86.643 107.187 88.538 105.127 89.6489 102.35C90.0016 101.476 89.6247 100.794 88.7133 100.673C85.592 100.255 82.7563 100.964 80.1995 102.768C78.7765 103.774 77.7019 105.088 76.7853 106.647C75.4609 105.96 74.2262 105.192 73.0678 104.346C72.6359 104.028 72.0323 104.081 71.6571 104.456C71.1624 104.95 71.2564 105.774 71.8488 106.153C73.0435 106.922 74.2315 107.677 75.436 108.403C75.8944 108.681 76.0157 108.935 75.9915 109.435C75.7422 114.465 78.7105 119.121 83.3201 120.985C84.226 121.353 85.0675 120.834 85.1662 119.865C85.4594 117.007 84.8194 114.372 83.2031 111.969C83.0217 111.701 82.8469 111.427 82.7528 111.287C85.0554 111.418 87.3848 111.582 89.7139 111.667C90.2244 111.686 90.4818 111.797 90.721 112.268C93.0148 116.801 97.9214 119.38 102.892 118.687C103.796 118.562 104.246 117.751 103.881 116.91C103.142 115.21 102.128 113.686 100.654 112.546C99.6361 111.755 98.5153 111.093 97.4409 110.371C97.5707 110.322 97.7706 110.263 97.9604 110.174C99.8211 109.3 101.692 108.456 103.522 107.525L103.526 107.542ZM115.749 106.061C113.919 107.735 109.011 107.748 106.591 106.047C109.693 104.509 112.696 104.524 115.749 106.061ZM113.709 71.2625C116.092 73.4897 116.978 78.7584 115.522 81.8002C113.229 80.3331 112.118 73.977 113.709 71.2625ZM107.97 85.5189C110.309 86.3432 112.88 90.7871 112.471 93.3041C109.92 92.029 107.709 88.1965 107.97 85.5189ZM123.323 89.6712C122.108 92.2376 118.155 94.4776 115.478 94.1449C116.647 91.6249 120.433 89.444 123.323 89.6712ZM86.8726 102.927C85.0248 105.763 82.4766 107.29 79.0148 107.514C80.1931 104.89 84.2385 102.531 86.8726 102.927ZM82.9097 118.215C80.3619 117.043 78.0748 113.213 78.2846 110.379C81.024 111.842 83.2442 115.631 82.9097 118.215ZM92.3866 108.984C91.9508 106.493 94.2033 102.462 96.7727 101.195C97.0761 103.925 94.7771 107.976 92.3866 108.984ZM101.137 116.523C98.1553 116.695 94.3382 114.501 93.2018 112.007C95.712 111.602 99.539 113.76 101.137 116.523Z",
        fill: "currentColor"
      }
    )
  );
};

const CertificateImageDisplay = ({
  imageUrl,
  className = "",
  ribbonColor = "amber-500"
}) => {
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: `flex items-center justify-center w-[120px] h-[120px] rounded-full border-white border-solid border-4 bg-white z-50 ${className}`
    },
    /* @__PURE__ */ React.createElement("div", { className: "relative w-[75%] h-[75%] flex items-center justify-center rounded-full border-white border-solid border-4 overflow-hidden object-contain" }, /* @__PURE__ */ React.createElement("img", { src: imageUrl, alt: "certificate thumbnail" })),
    /* @__PURE__ */ React.createElement(CertificateRibbon, { className: `absolute z-[9999] ${ribbonColor} w-[120px] h-[120px]` })
  );
};

const CertificateProfileImageDisplay = ({
  imageUrl,
  isIssuer = false,
  className = "",
  imageComponent,
  userName
}) => {
  const imageClassName = `h-[50px] w-[50px] rounded-full overflow-hidden ${isIssuer ? "!absolute border-[2px] border-solid border-grayscale-200" : ""}`;
  return /* @__PURE__ */ React.createElement("div", { className }, isIssuer && /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-full p-[5px]" }, /* @__PURE__ */ React.createElement(IssuerSeal, null)), imageComponent && /* @__PURE__ */ React.createElement("div", { className: imageClassName }, imageComponent), !imageComponent && /* @__PURE__ */ React.createElement(
    UserProfilePicture,
    {
      customContainerClass: `${imageClassName} ${!imageUrl ? "pt-[6px]" : ""}`,
      customImageClass: "h-full w-full object-cover",
      user: { image: imageUrl, name: userName }
    }
  ));
};

const CertificateFrontFace = ({
  isFront,
  credential,
  categoryType,
  issuerOverride,
  issueeOverride,
  knownDIDRegistry,
  subjectImageComponent,
  issuerImageComponent,
  customBodyCardComponent,
  hideIssueDate,
  handleViewBackFace,
  showDetailsBtn = false,
  formattedDisplayType,
  customBodyContentSlot,
  unknownVerifierTitle,
  hideAwardedTo: hideAwardedToProp,
  hideFrontFaceDetails
}) => {
  var _a, _b, _c;
  const {
    title = "",
    createdAt,
    issuer: _issuer = "",
    issuee: _issuee = "",
    credentialSubject,
    imageUrl
  } = getInfoFromCredential(credential, "MMM dd, yyyy", { uppercaseDate: false });
  const issuee = issueeOverride || _issuee;
  const issuer = issuerOverride || _issuer;
  const { description } = (_a = credentialSubject == null ? void 0 : credentialSubject.achievement) != null ? _a : {};
  const credentialLightColor = getCategoryLightColor(categoryType);
  const credentialDarkColor = getCategoryDarkColor(categoryType);
  let categoryTitle = categoryType;
  let textLightColor = `text-${credentialLightColor}`;
  let textDarkColor = `text-${credentialDarkColor}`;
  let borderColor = `border-${credentialLightColor}`;
  if (categoryType === LCCategoryEnum.accommodations) {
    textLightColor = "text-violet-500";
    textDarkColor = "text-violet-700";
    borderColor = "border-violet-500";
  } else if (categoryType === LCCategoryEnum.accomplishments) {
    textLightColor = "text-yellow-500";
    textDarkColor = "text-yellow-700";
    borderColor = "border-yellow-500";
    categoryTitle = "Portfolio";
  } else if (categoryType === LCCategoryEnum.learningHistory) {
    categoryTitle = "Study";
  } else if (categoryType === LCCategoryEnum.workHistory) {
    categoryTitle = "Experiences";
    textLightColor = "text-cyan-500";
    textDarkColor = "text-cyan-700";
    borderColor = "border-cyan-500";
  }
  const issuerName = getNameFromProfile(issuer != null ? issuer : "");
  const issueeName = getNameFromProfile(issuee != null ? issuee : "");
  const issuerImage = getImageFromProfile(issuer != null ? issuer : "");
  const issueeImage = getImageFromProfile(issuee != null ? issuee : "");
  const issuerDid = typeof credential.issuer === "string" ? credential.issuer : credential.issuer.id;
  const isAppIssuerDid = isAppDidWeb(issuerDid);
  let verifierState;
  if ((credentialSubject == null ? void 0 : credentialSubject.id) === issuerDid && issuerDid && issuerDid !== "did:example:123") {
    verifierState = VERIFIER_STATES.selfVerified;
  } else if (unknownVerifierTitle) {
    verifierState = VERIFIER_STATES.trustedVerifier;
  } else {
    if ((knownDIDRegistry == null ? void 0 : knownDIDRegistry.source) === "trusted") {
      verifierState = VERIFIER_STATES.trustedVerifier;
    } else if ((knownDIDRegistry == null ? void 0 : knownDIDRegistry.source) === "untrusted") {
      verifierState = VERIFIER_STATES.untrustedVerifier;
    } else if ((knownDIDRegistry == null ? void 0 : knownDIDRegistry.source) === "unknown") {
      verifierState = isAppIssuerDid ? VERIFIER_STATES.appIssuer : VERIFIER_STATES.unknownVerifier;
    } else {
      verifierState = isAppIssuerDid ? VERIFIER_STATES.appIssuer : VERIFIER_STATES.unknownVerifier;
    }
  }
  const isSelfVerified = verifierState === VERIFIER_STATES.selfVerified;
  const hideAwardedTo = hideAwardedToProp != null ? hideAwardedToProp : (issueeName == null ? void 0 : issueeName.includes("did:key")) || (issueeName == null ? void 0 : issueeName.includes("did:example:123"));
  return /* @__PURE__ */ React.createElement(
    "section",
    {
      role: "button",
      onClick: () => handleViewBackFace == null ? void 0 : handleViewBackFace(),
      className: "relative p-[13px] mt-[55px] bg-white border-[5px] rounded-[30px] border-soid border-grayscale-200"
    },
    /* @__PURE__ */ React.createElement("div", { className: "w-[calc(100%-26px)] absolute top-[-52px]" }, /* @__PURE__ */ React.createElement(
      CertificateImageDisplay,
      {
        imageUrl: imageUrl != null ? imageUrl : "",
        className: "mx-auto",
        ribbonColor: textLightColor
      }
    )),
    /* @__PURE__ */ React.createElement(
      "div",
      {
        className: `flex flex-col gap-[15px] items-center px-[20px] pt-[55px] ${isSelfVerified ? "pb-[20px]" : "pb-[77px]"} border-solid border-[4px] ${borderColor} rounded-[30px]`
      },
      /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-[5px] items-center" }, /* @__PURE__ */ React.createElement("h1", { className: "text-grayscale-900 text-center text-[20px] font-jacques" }, title), /* @__PURE__ */ React.createElement(
        "div",
        {
          className: `${textLightColor} uppercase text-[14px] font-notoSans font-[600]`
        },
        formattedDisplayType
      )),
      customBodyCardComponent,
      !customBodyCardComponent && /* @__PURE__ */ React.createElement(
        CertificateProfileImageDisplay,
        {
          imageUrl: issueeImage,
          imageComponent: subjectImageComponent,
          className: `flex justify-center items-center ${textDarkColor}`,
          isIssuer: isSelfVerified,
          userName: issueeName
        }
      ),
      /* @__PURE__ */ React.createElement("div", { className: "text-[14px] text-grayscale-800 flex flex-col items-center w-full" }, /* @__PURE__ */ React.createElement("span", { className: "font-jacques flex gap-[5px] items-center w-full justify-center text-center break-all" }, issueeName === "0 person" ? "Not yet awarded" : /* @__PURE__ */ React.createElement(React.Fragment, null, "Awarded", " ", !hideAwardedTo && /* @__PURE__ */ React.createElement(React.Fragment, null, "to ", issueeName || /* @__PURE__ */ React.createElement(Line, { width: "60" })))), !hideIssueDate && /* @__PURE__ */ React.createElement("span", { className: "font-jacques" }, "on ", createdAt)),
      /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-[10px] items-center" }, description && /* @__PURE__ */ React.createElement("div", { className: "text-center text-grayscale-700 text-[12px] font-jacques line-clamp-4" }, description), /* @__PURE__ */ React.createElement(
        CertDisplayCardSkillsCount,
        {
          skills: (_b = credential == null ? void 0 : credential.skills) != null ? _b : [],
          onClick: handleViewBackFace
        }
      ), isFront && showDetailsBtn && /* @__PURE__ */ React.createElement(
        "button",
        {
          type: "button",
          className: "vc-toggle-side-button text-white shadow-bottom bg-[#00000099] px-[30px] py-[8px] rounded-[40px] text-[28px] tracking-[0.75px] uppercase leading-[28px] mt-[25px] w-fit select-none",
          onClick: () => handleViewBackFace == null ? void 0 : handleViewBackFace()
        },
        "Details"
      )),
      /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-[5px] items-center w-full" }, /* @__PURE__ */ React.createElement("span", { className: "font-jacques text-[12px] text-grayscale-800" }, "Certified by"), /* @__PURE__ */ React.createElement("span", { className: "mb-[3px] pt-[3px] text-grayscale-900 text-[25px] leading-[90%] font-sacramento border-b-[1px] border-solid border-grayscale-200 w-full text-center overflow-ellipsis whitespace-normal scrollbar-hide" }, issuerName), /* @__PURE__ */ React.createElement(
        VerifierStateBadgeAndText,
        {
          verifierState,
          unknownVerifierTitle
        }
      )),
      customBodyContentSlot && customBodyContentSlot,
      /* @__PURE__ */ React.createElement("div", { className: `${textLightColor} uppercase text-[14px] font-notoSans font-[600]` }, categoryTitle)
    ),
    categoryType && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CertificateCornerIcon, { categoryType, position: "top-left" }), /* @__PURE__ */ React.createElement(CertificateCornerIcon, { categoryType, position: "top-right" }), /* @__PURE__ */ React.createElement(CertificateCornerIcon, { categoryType, position: "bottom-left" }), /* @__PURE__ */ React.createElement(CertificateCornerIcon, { categoryType, position: "bottom-right" })),
    !isSelfVerified && /* @__PURE__ */ React.createElement(
      CertificateProfileImageDisplay,
      {
        imageUrl: issuerImage || ((_c = credential == null ? void 0 : credential.issuer) == null ? void 0 : _c.image),
        imageComponent: issuerImageComponent,
        className: `w-[calc(100%-26px)] absolute bottom-0 flex justify-center items-center ${textDarkColor}`,
        isIssuer: true,
        userName: issuerName
      }
    ),
    /* @__PURE__ */ React.createElement("span", { className: "hidden border-rose-500 text-spice-500 border-spice-500 border-cyan-500 text-cyan-500 border-indigo-500" }),
    /* @__PURE__ */ React.createElement("span", { className: "hidden border-blue-500 border-indigo-500 border-pink-500 border-emerald-500 border-yellow-500 border-cyan-500 border-rose-500 border-emerald-500 border-teal-500 border-violet-500 border-yellow-500 border-spice-500 " }),
    /* @__PURE__ */ React.createElement("span", { className: "hidden text-blue-700 text-indigo-700 text-pink-700 text-emerald-700 text-yellow-700 text-cyan-700 text-rose-700 text-emerald-700 text-teal-700 text-violet-700 text-yellow-700 text-spice-700 " })
  );
};

const CertificateDisplayCard = ({
  credential,
  categoryType,
  verificationItems,
  issuerOverride,
  issueeOverride,
  subjectImageComponent,
  issuerImageComponent,
  customBodyCardComponent,
  knownDIDRegistry,
  hideIssueDate,
  customSkillsComponent,
  getFileMetadata,
  getVideoMetadata,
  onMediaAttachmentClick,
  enableLightbox,
  handleXClick,
  onDotsClick,
  isFrontOverride,
  setIsFrontOverride,
  hideNavButtons,
  showBackButton = false,
  showDetailsBtn = false,
  formattedDisplayType,
  customLinkedCredentialsComponent,
  customBodyContentSlot,
  unknownVerifierTitle,
  hideAwardedTo,
  hideFrontFaceDetails
}) => {
  const [_isFront, _setIsFront] = useState(isFrontOverride != null ? isFrontOverride : true);
  const isFront = isFrontOverride != null ? isFrontOverride : _isFront;
  const setIsFront = setIsFrontOverride != null ? setIsFrontOverride : _setIsFront;
  return /* @__PURE__ */ React.createElement("section", { className: "w-full flex flex-col gap-[15px] items-center justify-center relative min-w-[220px]" }, /* @__PURE__ */ React.createElement("section", { className: "max-w-[350px] w-full" }, isFront && /* @__PURE__ */ React.createElement(
    CertificateFrontFace,
    {
      credential,
      categoryType,
      issuerOverride,
      issueeOverride,
      knownDIDRegistry,
      subjectImageComponent,
      issuerImageComponent,
      customBodyCardComponent,
      hideIssueDate,
      handleViewBackFace: () => setIsFront(!isFront),
      isFront,
      showDetailsBtn,
      formattedDisplayType,
      customBodyContentSlot,
      unknownVerifierTitle,
      hideAwardedTo,
      hideFrontFaceDetails
    }
  ), !isFront && /* @__PURE__ */ React.createElement(
    CertificateBackFace,
    {
      credential,
      categoryType,
      verificationItems,
      getFileMetadata,
      getVideoMetadata,
      onMediaAttachmentClick,
      enableLightbox,
      showBackButton: showBackButton && !hideNavButtons || showDetailsBtn,
      handleViewFrontFace: () => setIsFront(!isFront),
      customLinkedCredentialsComponent
    }
  ), onDotsClick && /* @__PURE__ */ React.createElement(
    "button",
    {
      className: "absolute right-[-20px] top-[-52px] bg-white rounded-full p-[10px] shadow-bottom",
      onClick: onDotsClick
    },
    /* @__PURE__ */ React.createElement(
      "img",
      {
        alt: "Menu dropdown icon",
        className: "h-[20px] w-[20px]",
        src: ThreeDots
      }
    )
  )), !hideNavButtons && /* @__PURE__ */ React.createElement("div", { className: "flex gap-[10px] font-mouse text-[30px] leading-[28px] tracking-[0.75px] relative top-[-10px] left-0 w-full" }, !isFront && /* @__PURE__ */ React.createElement(
    "button",
    {
      className: "bg-grayscale-900 text-white py-[15px] px-[20px] rounded-[20px] flex mx-auto justify-center items-center gap-[5px] border-[3px] border-solid border-white",
      onClick: () => setIsFront(!isFront)
    },
    /* @__PURE__ */ React.createElement(FatArrow, { direction: "left" }),
    " Back"
  ), handleXClick && /* @__PURE__ */ React.createElement(
    "button",
    {
      onClick: handleXClick,
      className: "bg-white text-grayscale-900 rounded-[20px] py-[15px] px-[20px] grow"
    },
    "Close"
  ), isFront && /* @__PURE__ */ React.createElement(
    "button",
    {
      className: "bg-grayscale-900 text-white py-[15px] px-[20px] rounded-[20px] mx-auto flex justify-center items-center gap-[5px] border-[3px] border-solid border-white",
      onClick: () => setIsFront(!isFront)
    },
    "Details ",
    /* @__PURE__ */ React.createElement(FatArrow, { direction: "right" })
  )));
};

export { AlignmentsBox as A, CertDisplayCardSkillsCount as C, CertificateBackFace as a, CertificateDisplayCard as b, CertificateFrontFace as c };
//# sourceMappingURL=CertificateDisplayCard-110ddfae.js.map
