import React from 'react';
import { b as VCVerificationCheckWithText } from './VCVerificationCheck-8b8b7a76.js';
import { a as VCVerificationPill } from './VCVerificationPill-ba90b49b.js';
import FlipArrowRight from './ArrowArcRight.svg';
import { h as getNameFromProfile } from './credential.helpers-30058000.js';

const VCDisplayBackFace = ({
  issuer,
  credentialSubject,
  className = "",
  loading,
  verification = [],
  handleClick,
  overrideDetailsComponent
}) => {
  var _a, _b, _c, _d;
  const descriptionText = (_a = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _a.description;
  const criteriaText = (_c = (_b = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _b.criteria) == null ? void 0 : _c.narrative;
  const issuerUrl = typeof issuer === "object" ? issuer.url : "";
  const issuerName = getNameFromProfile(issuer != null ? issuer : "");
  const defaultDetails = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "width-full" }, /* @__PURE__ */ React.createElement("h6", { className: "line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased" }, "Description"), /* @__PURE__ */ React.createElement("p", { className: "line-clamp-3 subpixel-antialiased text-grayscale-600 text-[14px] lc-line-clamp" }, descriptionText)), /* @__PURE__ */ React.createElement("div", { className: "width-full mt-[10px]" }, /* @__PURE__ */ React.createElement("h6", { className: "line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider  subpixel-antialiased" }, "Criteria"), /* @__PURE__ */ React.createElement("p", { className: "line-clamp-3 subpixel-antialiased text-grayscale-600 text-[14px] lc-line-clamp" }, criteriaText)), /* @__PURE__ */ React.createElement("div", { className: "width-full mt-[10px] line-clamp-1 overflow-hidden vc-issuer-name-info" }, /* @__PURE__ */ React.createElement("h6", { className: "line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased" }, "Issuer"), /* @__PURE__ */ React.createElement("p", { className: "max-w-[344px] line-clamp-1 subpixel-antialiased text-grayscale-600 text-[14px] block overflow-ellipsis break-all" }, issuerName)), issuerUrl && /* @__PURE__ */ React.createElement("p", { className: "text-indigo-500 font-bold text-xs width-full text-center mt-8" }, issuerUrl));
  const renderDetails = overrideDetailsComponent ? overrideDetailsComponent : defaultDetails;
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: `z-[9] vc-display-main-card-back flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-[100%] max-h-[1100px] min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`
    },
    /* @__PURE__ */ React.createElement("section", { className: "flex max-h-[150px] items-end bg-white rounded-bl-[50%] rounded-br-[50%] absolute top-0 w-[110%] h-[55%] min-h-[400px]" }),
    /* @__PURE__ */ React.createElement("section", { className: "flex flex-col items-center justify-center w-full z-10 text-left credential-details-container max-w-[100%] relative" }, /* @__PURE__ */ React.createElement("section", { className: "flex flex-row items-start justify-start w-full line-clamp-2" }, /* @__PURE__ */ React.createElement(
      "h3",
      {
        className: "text-2xl line-clamp-2 tracking-wide leading-snug text-left text-emerald-700",
        "data-testid": "vc-credential-details-title tracking-wide subpixel-antialiased"
      },
      "Credential Details"
    )), /* @__PURE__ */ React.createElement("section", { className: "flex flex-col mt-2 w-full my-2 min-h-[200px] credential-details-info" }, renderDetails), /* @__PURE__ */ React.createElement("div", { className: "w-full mt-2" }), /* @__PURE__ */ React.createElement(
      "button",
      {
        onClick: handleClick,
        className: "vc-flip-btn bg-white my-3 border-2 text-indigo-500 font-semibold py-2 px-4 shadow-3xl rounded-full"
      },
      /* @__PURE__ */ React.createElement("span", { className: "flex justify-center" }, /* @__PURE__ */ React.createElement(
        "img",
        {
          className: "h-8 w-8 my-0 mx-4 scale-x-[-1]",
          src: (_d = FlipArrowRight) != null ? _d : "",
          alt: "Flip Card"
        }
      ))
    ), /* @__PURE__ */ React.createElement("section", { className: "flex-col items-center justify-center checklist-container justify-center w-[100%] width-full mt-[20px]" }, /* @__PURE__ */ React.createElement(VCVerificationCheckWithText, { loading }), /* @__PURE__ */ React.createElement("section", null, verification.map((item) => /* @__PURE__ */ React.createElement(
      VCVerificationPill,
      {
        key: item.check,
        status: item.status,
        message: item.message,
        details: item.details
      }
    )))))
  );
};

export { VCDisplayBackFace as V };
//# sourceMappingURL=VCDisplayBackFace-eeaa642e.js.map
