'use strict';

var React = require('react');
var FatArrow = require('./icon.green.fat-arrow.png');
var VerifiedCheck = require('./verified-check.png');

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

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var FatArrow__default = /*#__PURE__*/_interopDefaultLegacy(FatArrow);
var VerifiedCheck__default = /*#__PURE__*/_interopDefaultLegacy(VerifiedCheck);

const VCThumbnail = ({
  title,
  createdAt,
  issuerImage,
  userImage,
  userImageComponent,
  badgeImage,
  className = "",
  listView = false,
  onClick = () => {
  }
}) => {
  var _a, _b, _c;
  let imageElement = null;
  let userImageEl = null;
  if (issuerImage) {
    imageElement = /* @__PURE__ */ React__default["default"].createElement("img", { className: "h-full w-full object-cover", src: issuerImage, alt: "issuer image" });
  } else if (badgeImage) {
    imageElement = /* @__PURE__ */ React__default["default"].createElement("img", { className: "h-full w-full object-cover", src: badgeImage, alt: "badge image" });
  }
  if (userImage) {
    userImageEl = /* @__PURE__ */ React__default["default"].createElement("div", { className: "inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/4 pb-25pct" }, /* @__PURE__ */ React__default["default"].createElement(
      "img",
      {
        className: "w-full h-full absolute rounded-full object-cover border-solid border-4 border-white",
        src: userImage,
        alt: "user image"
      }
    ));
  } else if (!userImage && userImageComponent) {
    userImageEl = userImageComponent;
  }
  const titleClass = issuerImage || badgeImage ? "items-start justify-center w-3/4 text-left" : "item-center justify-center w-full text-center";
  if (listView) {
    return /* @__PURE__ */ React__default["default"].createElement(
      "div",
      {
        onClick,
        className: `flex flex-col items-center justify-between relative py-3 px-3 rounded-3xl shadow-3xl bg-emerald-700 max-w-sm vc-thumbnail-listview-container ${className}`,
        "data-testid": "vc-thumbnail-list-view"
      },
      /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-row items-center justify-between mb-3 z-10" }, imageElement && /* @__PURE__ */ React__default["default"].createElement(
        "div",
        {
          className: "flex flex-row justify-center items-center w-1/4 text-center",
          "data-testid": "vc-thumbnail-image"
        },
        /* @__PURE__ */ React__default["default"].createElement("div", { className: "h-16 w-16 border-solid border-2 border-black bg-white" }, imageElement)
      ), /* @__PURE__ */ React__default["default"].createElement("div", { className: `flex flex-col  ${titleClass}` }, /* @__PURE__ */ React__default["default"].createElement(
        "h2",
        {
          className: "ml-1 sm:ml-0 md:ml-0 lg:ml-0 text-base tracking-wide leading-snug text-left line-clamp-2",
          "data-testid": "vc-thumbnail-title"
        },
        title != null ? title : ""
      ), /* @__PURE__ */ React__default["default"].createElement(
        "p",
        {
          className: "ml-1 sm:ml-0 md:ml-0 lg:ml-0 text-sm font-light text-center line-clamp-1",
          "data-testid": "vc-thumbnail-createdAt"
        },
        createdAt != null ? createdAt : ""
      ))),
      /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex items-center justify-center w-full mt-3 vc-thumbnail-footer" }, /* @__PURE__ */ React__default["default"].createElement("h3", { className: "text-white text-sm text-right font-normal tracking-wide leading-tight flex-1" }, "Verified"), /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex items-center justify-center my-0 mx-1 h-10 w-10 rounded-full bg-white overflow-hidden" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex items-center justify-center h-5/6 w-10/12 bg-white rounded-full border-solid border-4 border-emerald-700 overflow-hidden" }, /* @__PURE__ */ React__default["default"].createElement(
        "img",
        {
          className: "h-full w-full object-cover",
          src: (_a = VerifiedCheck__default["default"]) != null ? _a : "",
          alt: "credential icon"
        }
      ))), /* @__PURE__ */ React__default["default"].createElement("h3", { className: "text-white text-sm text-left font-normal tracking-wide leading-tight flex-1" }, "Credential"))
    );
  }
  const vcThumbNailAltContainerClass = !badgeImage ? "vc-thumbnail-alt-container" : "";
  return /* @__PURE__ */ React__default["default"].createElement(
    "div",
    {
      onClick,
      className: `relative py-3 xxsm:py-1 rounded-3xl shadow-3xl bg-emerald-700 vc-thumbnail-container ${vcThumbNailAltContainerClass} ${className}`,
      "data-testid": "vc-thumbnail"
    },
    /* @__PURE__ */ React__default["default"].createElement("div", { className: "h-full w-full absolute" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-col items-center justify-center z-10 text-center w-full" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-row items-center justify-center w-full px-2" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-row items-center justify-center w-full" }, /* @__PURE__ */ React__default["default"].createElement(
      "h2",
      {
        className: "text-base tracking-wide leading-snug text-center line-clamp-2",
        "data-testid": "vc-thumbnail-title"
      },
      title != null ? title : ""
    ))), /* @__PURE__ */ React__default["default"].createElement("div", { className: "w-full mt-2" }, /* @__PURE__ */ React__default["default"].createElement(
      "p",
      {
        className: "text-sm font-light text-center line-clamp-1",
        "data-testid": "vc-thumbnail-createdAt"
      },
      createdAt != null ? createdAt : ""
    )), /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-row items-center justify-center mt-3 xxsm:mt-1 w-full" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/4 pb-25pct" }, /* @__PURE__ */ React__default["default"].createElement(
      "img",
      {
        className: "h-5/6 w-10/12 left-1 top-1 absolute rounded-full object-cover",
        src: issuerImage,
        alt: "issuer image"
      }
    )), /* @__PURE__ */ React__default["default"].createElement(
      "img",
      {
        className: "h-8 w-8 my-0 mx-4",
        src: (_b = FatArrow__default["default"]) != null ? _b : "",
        alt: "fat arrow icon"
      }
    ), userImageEl)), badgeImage && /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex items-center justify-center w-full mt-4 xxxsm:mt-0" }, /* @__PURE__ */ React__default["default"].createElement(
      "div",
      {
        className: "border-solid border-2 border-black bg-white relative w-1/4 h-0 overflow-hidden pt-25pct pb-0 px-0",
        "data-testid": "vc-thumbnail-badge"
      },
      /* @__PURE__ */ React__default["default"].createElement(
        "img",
        {
          className: "h-full w-full object-cover absolute top-0 left-0",
          src: badgeImage,
          alt: "badge image"
        }
      )
    )), /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex items-center justify-center absolute right-2 bottom-5 xxsm:bottom-3 xxxsm:bottom-3 h-8 w-8 rounded-full bg-white overflow-hidden" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex items-center justify-center h-5/6 w-10/12 bg-white rounded-full border-solid border-2 border-emerald-700 overflow-hidden" }, /* @__PURE__ */ React__default["default"].createElement(
      "img",
      {
        className: "h-full w-full object-cover",
        src: (_c = VerifiedCheck__default["default"]) != null ? _c : "",
        alt: "credential icon"
      }
    ))))
  );
};

exports.VCThumbnail = VCThumbnail;
//# sourceMappingURL=VCThumbnail-f84d0d01.js.map
