import React from 'react';
import { V as VerificationStatusEnum } from './types.esm-f58818d5.js';
import VerificationFailedIcon from './RedXCircle.svg';
import VerificationPassedIcon from './GreenCheckCircle.svg';
import VerificationWarningIcon from './YellowWarningCircle.svg';

const StatusToBgColor = {
  [VerificationStatusEnum.Success]: "bg-emerald-500",
  [VerificationStatusEnum.Failed]: "bg-yellow-400",
  [VerificationStatusEnum.Error]: "bg-rose-600"
};
const StatusToTextColor = {
  [VerificationStatusEnum.Success]: "text-emerald-700",
  [VerificationStatusEnum.Failed]: "text-yellow-400",
  [VerificationStatusEnum.Error]: "text-rose-600"
};
const StatusToIcon = {
  [VerificationStatusEnum.Success]: VerificationPassedIcon,
  [VerificationStatusEnum.Failed]: VerificationWarningIcon,
  [VerificationStatusEnum.Error]: VerificationFailedIcon
};
const StatusToText = {
  [VerificationStatusEnum.Success]: "Verification Success",
  [VerificationStatusEnum.Error]: "Verification Error ",
  [VerificationStatusEnum.Failed]: "Verification Failed"
};
const ValidationStateIndicator = ({ status }) => {
  const bgColor = StatusToBgColor[status];
  const source = StatusToIcon[status];
  return /* @__PURE__ */ React.createElement("div", { className: `relative rounded-full w-[30px] h-[30px] ${bgColor}` }, /* @__PURE__ */ React.createElement("div", { className: "relative w-[100%] h-[100%] flex items-center justify-center rounded-[50%] bg-white rounded-full overflow-hidden" }, /* @__PURE__ */ React.createElement(
    "img",
    {
      className: "h-full w-full object-contain p-1",
      src: source != null ? source : "",
      alt: "Verification Status Icon"
    }
  )));
};
const VCVerificationPill = ({
  message = "",
  details,
  status = VerificationStatusEnum.Success
}) => {
  const statusColor = StatusToTextColor[status];
  const statusInfoText = StatusToText[status];
  return /* @__PURE__ */ React.createElement("section", { className: "flex width-full bg-white p-2 px-5 my-3.5 justify-between items-center relative vc-verification-checklist-pill rounded-[22px]" }, /* @__PURE__ */ React.createElement("div", { className: "vc-pill-left" }, /* @__PURE__ */ React.createElement("p", { className: `text-[10px] font-bold status-text uppercase ${statusColor}` }, statusInfoText), /* @__PURE__ */ React.createElement("p", { className: "text-[12px] text-grayscale-900 vc-pill-text" }, message), details && /* @__PURE__ */ React.createElement("p", { className: "text-[12px] text-gray-600" }, " ", details)), /* @__PURE__ */ React.createElement("div", { className: "vc-pill-right" }, /* @__PURE__ */ React.createElement(ValidationStateIndicator, { status })));
};

export { ValidationStateIndicator as V, VCVerificationPill as a };
//# sourceMappingURL=VCVerificationPill-ba90b49b.js.map
