'use strict';

var React = require('react');
var types_esm = require('./types.esm-4a1c2fcd.js');
var VerificationFailedIcon = require('./RedXCircle.svg');
var VerificationPassedIcon = require('./GreenCheckCircle.svg');
var VerificationWarningIcon = require('./YellowWarningCircle.svg');

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

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var VerificationFailedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VerificationFailedIcon);
var VerificationPassedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VerificationPassedIcon);
var VerificationWarningIcon__default = /*#__PURE__*/_interopDefaultLegacy(VerificationWarningIcon);

const StatusToBgColor = {
  [types_esm.VerificationStatusEnum.Success]: "bg-emerald-500",
  [types_esm.VerificationStatusEnum.Failed]: "bg-yellow-400",
  [types_esm.VerificationStatusEnum.Error]: "bg-rose-600"
};
const StatusToTextColor = {
  [types_esm.VerificationStatusEnum.Success]: "text-emerald-700",
  [types_esm.VerificationStatusEnum.Failed]: "text-yellow-400",
  [types_esm.VerificationStatusEnum.Error]: "text-rose-600"
};
const StatusToIcon = {
  [types_esm.VerificationStatusEnum.Success]: VerificationPassedIcon__default["default"],
  [types_esm.VerificationStatusEnum.Failed]: VerificationWarningIcon__default["default"],
  [types_esm.VerificationStatusEnum.Error]: VerificationFailedIcon__default["default"]
};
const StatusToText = {
  [types_esm.VerificationStatusEnum.Success]: "Verification Success",
  [types_esm.VerificationStatusEnum.Error]: "Verification Error ",
  [types_esm.VerificationStatusEnum.Failed]: "Verification Failed"
};
const ValidationStateIndicator = ({ status }) => {
  const bgColor = StatusToBgColor[status];
  const source = StatusToIcon[status];
  return /* @__PURE__ */ React__default["default"].createElement("div", { className: `relative rounded-full w-[30px] h-[30px] ${bgColor}` }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "relative w-[100%] h-[100%] flex items-center justify-center rounded-[50%] bg-white rounded-full overflow-hidden" }, /* @__PURE__ */ React__default["default"].createElement(
    "img",
    {
      className: "h-full w-full object-contain p-1",
      src: source != null ? source : "",
      alt: "Verification Status Icon"
    }
  )));
};
const VCVerificationPill = ({
  message = "",
  details,
  status = types_esm.VerificationStatusEnum.Success
}) => {
  const statusColor = StatusToTextColor[status];
  const statusInfoText = StatusToText[status];
  return /* @__PURE__ */ React__default["default"].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__default["default"].createElement("div", { className: "vc-pill-left" }, /* @__PURE__ */ React__default["default"].createElement("p", { className: `text-[10px] font-bold status-text uppercase ${statusColor}` }, statusInfoText), /* @__PURE__ */ React__default["default"].createElement("p", { className: "text-[12px] text-grayscale-900 vc-pill-text" }, message), details && /* @__PURE__ */ React__default["default"].createElement("p", { className: "text-[12px] text-gray-600" }, " ", details)), /* @__PURE__ */ React__default["default"].createElement("div", { className: "vc-pill-right" }, /* @__PURE__ */ React__default["default"].createElement(ValidationStateIndicator, { status })));
};

exports.VCVerificationPill = VCVerificationPill;
exports.ValidationStateIndicator = ValidationStateIndicator;
//# sourceMappingURL=VCVerificationPill-08b37c5d.js.map
