import React from 'react';
import { Q as QRCodeSVG } from './index-2ef835bd.js';
import CardChip from './card-chip.svg';
import MasterCardLogo from './master-card-logo.svg';

const LearnCardCreditCardFrontFace = ({
  userImage,
  userImageComponent = null,
  qrCodeValue,
  className,
  showActionButton = false,
  actionButtonText = "Open Card",
  onClick = () => {
  },
  children
}) => {
  var _a, _b;
  let userImageEl = null;
  if (userImage) {
    userImageEl = /* @__PURE__ */ React.createElement("div", { className: "inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/2 pb-[50%] mt-2 ml-4" }, /* @__PURE__ */ React.createElement(
      "img",
      {
        className: "w-full h-full absolute rounded-full object-cover border-solid border-2 border-white",
        src: userImage,
        alt: "user image",
        "data-testid": "credit-card-frontface-userImg"
      }
    ));
  } else if (!userImage && userImageComponent) {
    userImageEl = userImageComponent;
  }
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: `flex justify-center items-center max-w-[375px] rounded-[20px] ${className}`
    },
    /* @__PURE__ */ React.createElement(
      "div",
      {
        className: `flex flex-row justify-center items-start pt-9 w-full min-h-[220px] rounded-[20px] shadow-3xl relative overflow-hidden credit-card-front-face`
      },
      /* @__PURE__ */ React.createElement("div", { className: "absolute top-[-40px] left-0 w-[55%] h-[140%] rounded-tr-[150px] rounded-br-[150px] bg-grayscale-900 credit-card-bubble" }),
      showActionButton && /* @__PURE__ */ React.createElement(
        "button",
        {
          className: "absolute top-2 right-4 bg-grayscale-500 border-[2px] rounded-3xl border-solid border-color-grayscale-900 min-w-[110px] p-[2px] font-bold text-xs tracking-wide leading-snug text-center text-white",
          onClick,
          "data-testid": "credit-card-frontface-button"
        },
        actionButtonText
      ),
      /* @__PURE__ */ React.createElement("div", { className: "flex flex-row justify-between items-start w-full h-full relative" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "pl-8" }, /* @__PURE__ */ React.createElement("p", { className: "w-full text-xs text-white font-bold tracking-[7px] mb-2 credit-card-front-face-title" }, "LEARNCARD"), /* @__PURE__ */ React.createElement(
        "img",
        {
          src: (_a = CardChip) != null ? _a : "",
          alt: "card chip",
          className: "h-[30px] w-[42px]"
        }
      )), userImageEl), qrCodeValue && /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 justify-center items-center relative pl-10 credit-card-qr-code-container" }, /* @__PURE__ */ React.createElement("div", { className: "h-auto relative qr-code-container" }, /* @__PURE__ */ React.createElement(
        QRCodeSVG,
        {
          className: "h-full w-full",
          value: qrCodeValue,
          "data-testid": "credit-card-qr-code",
          bgColor: "transparent"
        }
      ))), /* @__PURE__ */ React.createElement(
        "img",
        {
          src: (_b = MasterCardLogo) != null ? _b : "",
          alt: "mastercard icon",
          className: "absolute bottom-[-8px] right-4 learn-card-mastercard-logo"
        }
      ))
    ),
    children
  );
};

export { LearnCardCreditCardFrontFace as L };
//# sourceMappingURL=LearnCardCreditCardFrontFace-b7c917f5.js.map
