'use strict';

var React = require('react');
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 VerifiedCheck__default = /*#__PURE__*/_interopDefaultLegacy(VerifiedCheck);

const MiniVCThumbnail = ({
  title,
  createdAt,
  issuerImage,
  badgeImage,
  className = "",
  onClick = () => {
  }
}) => {
  var _a;
  const titleClasses = !issuerImage ? "w-full text-center" : "w-3/4 text-left";
  const createdAtClasses = !issuerImage ? "w-full text-center" : "text-left";
  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 min-h-[120px] max-w-sm mini-vc-thumbnail-container ${className}`,
      "data-testid": "mini-vc-thumbnail"
    },
    /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-row items-center justify-between mb-3 z-10" }, issuerImage && /* @__PURE__ */ React__default["default"].createElement(
      "div",
      {
        className: "flex flex-row justify-center items-center w-1/4 text-center",
        "data-testid": "mini-vc-thumbnail-issuer"
      },
      /* @__PURE__ */ React__default["default"].createElement("div", { className: "min-w-[40px] min-h-[40px] max-h-[48px] max-w-[48px] shadow-3xl p-1 rounded-full bg-white" }, /* @__PURE__ */ React__default["default"].createElement(
        "img",
        {
          className: "h-full w-full object-cover rounded-full",
          src: issuerImage,
          alt: "issuer image"
        }
      ))
    ), /* @__PURE__ */ React__default["default"].createElement("div", { className: `flex flex-col items-start justify-center ${titleClasses}` }, /* @__PURE__ */ React__default["default"].createElement(
      "h2",
      {
        className: "ml-2 text-sm tracking-wide leading-snug line-clamp-2",
        "data-testid": "mini-vc-thumbnail-title"
      },
      title != null ? title : ""
    ), /* @__PURE__ */ React__default["default"].createElement(
      "p",
      {
        className: `ml-2 text-sm font-light line-clamp-1 ${createdAtClasses}`,
        "data-testid": "mini-vc-thumbnail-createdAt"
      },
      createdAt != null ? createdAt : ""
    ))),
    /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex items-center justify-center w-full mt-3" }, badgeImage && /* @__PURE__ */ React__default["default"].createElement(
      "div",
      {
        className: "flex item-center justify-center w-full -mt-3",
        "data-testid": "mini-vc-thumbnail-badge"
      },
      /* @__PURE__ */ React__default["default"].createElement("div", { className: "max-h-[80px] max-w-[80px] xxsm:h-[60px] xxsm:w-[60px] border-solid border-1 border-black bg-white z-10" }, /* @__PURE__ */ React__default["default"].createElement(
        "img",
        {
          className: "h-full w-full object-cover",
          src: badgeImage,
          alt: "badge image"
        }
      ))
    ), /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex absolute bottom-1 right-1 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"
      }
    ))))
  );
};

exports.MiniVCThumbnail = MiniVCThumbnail;
//# sourceMappingURL=MiniVCThumbnail-9c510f51.js.map
