'use strict';

var React = require('react');
var ContactlessSymbol = require('./contactless-symbol.svg');

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

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var ContactlessSymbol__default = /*#__PURE__*/_interopDefaultLegacy(ContactlessSymbol);

const LearnCardCreditCardBackFace = ({
  className,
  card,
  user
}) => {
  var _a, _b, _c, _d;
  return /* @__PURE__ */ React__default["default"].createElement(
    "div",
    {
      className: `flex justify-center items-center max-w-[375px] rounded-[20px] ${className}`
    },
    /* @__PURE__ */ React__default["default"].createElement(
      "div",
      {
        className: `flex flex-col justify-start items-start w-full min-h-[220px] rounded-[20px] shadow-3xl bg-grayscale-900 relative overflow-hidden credit-card-front-face`
      },
      /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex justify-between items-center w-full px-3 pt-4 text-white" }, /* @__PURE__ */ React__default["default"].createElement("p", { className: "text-[6px]" }, "Please visit LearnCard app or learncard.com for assistance"), /* @__PURE__ */ React__default["default"].createElement("p", { className: "text-[6px]" }, "854-000-000-24")),
      /* @__PURE__ */ React__default["default"].createElement("div", { className: "w-full h-8 bg-white mt-1" }),
      /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex justify-end items-center w-full px-3 mt-1 text-white" }, /* @__PURE__ */ React__default["default"].createElement("p", { className: "text-[6px]" }, "IDEMIA 0 00000 00000 0/00")),
      /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-row justify-between items-center px-3 pt-2 w-full text-white" }, /* @__PURE__ */ React__default["default"].createElement("div", null, (user == null ? void 0 : user.username) && /* @__PURE__ */ React__default["default"].createElement(
        "p",
        {
          className: "text-[10px] font-medium",
          "data-testid": "credit-card-backface-username"
        },
        user == null ? void 0 : user.username
      ), /* @__PURE__ */ React__default["default"].createElement(
        "p",
        {
          className: "text-sm tracking-wider",
          "data-testid": "credit-card-backface-fullname"
        },
        (_a = user == null ? void 0 : user.fullName) != null ? _a : ""
      ), (card == null ? void 0 : card.cardIssueDate) && /* @__PURE__ */ React__default["default"].createElement(
        "p",
        {
          className: "text-[10px] tracking-wider",
          "data-testid": "credit-card-backface-issueDate"
        },
        "MEMBER SINCE ",
        card == null ? void 0 : card.cardIssueDate
      )), /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement("img", { src: ContactlessSymbol__default["default"], alt: "contactless icon" }))),
      /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-row justify-between items-center px-3 pt-2 w-full text-white" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React__default["default"].createElement(
        "p",
        {
          className: "text-sm tracking-wider",
          "data-testid": "credit-card-backface-cardNum"
        },
        (_b = card == null ? void 0 : card.cardNumber) != null ? _b : ""
      ), /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-row justify-between items-center" }, /* @__PURE__ */ React__default["default"].createElement(
        "p",
        {
          className: "text-[10px] tracking-wider",
          "data-testid": "credit-card-backface-expDate"
        },
        "EXP ",
        (_c = card == null ? void 0 : card.cardExpirationDate) != null ? _c : ""
      ), (card == null ? void 0 : card.cardSecurityCode) && /* @__PURE__ */ React__default["default"].createElement(
        "p",
        {
          className: "text-[10px] tracking-wider",
          "data-testid": "credit-card-backface-secCode"
        },
        "SEC ",
        (_d = card == null ? void 0 : card.cardSecurityCode) != null ? _d : ""
      ))), /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement("div", { className: "h-[33px] w-[55px] rounded-[60px] bg-gradient-to-r from-[#F4F5F5] to-[#E3E5E8]" }))),
      /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex justify-start items-center w-full px-3 py-2 text-white" }, /* @__PURE__ */ React__default["default"].createElement("p", { className: "text-[6px]" }, "Issued by the bank of Tennessee pursuant to license by Mastercard International"))
    )
  );
};

exports.LearnCardCreditCardBackFace = LearnCardCreditCardBackFace;
//# sourceMappingURL=LearnCardCreditCardBackFace-62330eea.js.map
