import React, { useState, useEffect } from 'react';
import X from './X.svg';
import { N as NotificationTypeStyles } from './types-c765e2a4.js';
import { N as NotificationTypeEnum } from './notifications-009bbd80.js';
import { C as Checkmark } from './Checkmark-724d5d17.js';
import ArrowArcLeft from './ArrowArcLeft.svg';
import { U as UserProfilePicture } from './UserProfilePicture-7b950437.js';

const NotificationBoostCard = ({
  title,
  customThumbComponent,
  className,
  thumbImage,
  notificationType = NotificationTypeEnum.Achievement,
  issueDate,
  issuerInfo,
  claimStatus = false,
  loadingState = false,
  handleButtonClick,
  handleCancelClick,
  handleCardClick,
  showIssuerInfo = true,
  isArchived
}) => {
  var _a, _b;
  const [isClaimed, setIsClaimed] = useState(claimStatus || false);
  const [isLoading, setIsLoading] = useState(loadingState || false);
  useEffect(() => {
    setIsClaimed(claimStatus);
  }, [claimStatus]);
  useEffect(() => {
    setIsLoading(loadingState);
  }, [loadingState]);
  const {
    iconCircleStyles,
    textStyles,
    viewButtonStyles,
    claimedButtonStyles,
    unclaimedButtonStyles,
    typeText
  } = NotificationTypeStyles[notificationType];
  const claimButtonStyles = isClaimed ? claimedButtonStyles : unclaimedButtonStyles;
  let buttonText = "";
  if (isClaimed) {
    buttonText = "Claimed";
  } else if (!isClaimed) {
    buttonText = "Claim";
  }
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: `flex justify-start max-w-[600px] items-start relative w-full rounded-3xl shadow-bottom py-[10px] px-[10px] bg-white ${className}`
    },
    /* @__PURE__ */ React.createElement("div", { className: "notification-card-left-side px-[0px] flex" }, !customThumbComponent && /* @__PURE__ */ React.createElement(
      "div",
      {
        onClick: handleCardClick,
        className: `overflow-hidden cursor-pointer w-[90px] h-[90px] rounded-full flex items-start ${iconCircleStyles} notification-card-thumbnail`
      },
      /* @__PURE__ */ React.createElement(
        "img",
        {
          src: thumbImage,
          alt: "Notification Thumb",
          className: "w-full h-full w-[100px] h-[100px] object-cover"
        }
      )
    ), customThumbComponent && customThumbComponent),
    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col justify-center items-start relative w-full" }, /* @__PURE__ */ React.createElement("div", { className: "text-left ml-3 flex flex-col items-start justify-start w-full" }, /* @__PURE__ */ React.createElement(
      "h4",
      {
        onClick: handleCardClick,
        className: "cursor-pointer font-bold tracking-wide line-clamp-2 text-black text-[14px] pr-[20px] notification-card-title",
        "data-testid": "notification-title"
      },
      title
    ), /* @__PURE__ */ React.createElement(
      "p",
      {
        className: `font-semibold p-0 mt-[10px] leading-none tracking-wide line-clamp-1 text-[12px] notification-card-type-text ${textStyles}`,
        "data-testid": "notification-type"
      },
      typeText,
      " ",
      issueDate && /* @__PURE__ */ React.createElement(
        "span",
        {
          className: "text-grayscale-600 normal-case font-normal text-[12px] notification-card-type-issue-date",
          "data-testid": "notification-cred-issue-date"
        },
        "\u2022 ",
        issueDate
      )
    ), showIssuerInfo && /* @__PURE__ */ React.createElement("div", { className: "notification-card-issuer-info flex items-center mt-[10px]" }, /* @__PURE__ */ React.createElement("div", { className: "profile-thumb-img border-[2px] border-white border-solid  vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden mx-[-5px]" }, /* @__PURE__ */ React.createElement(
      UserProfilePicture,
      {
        customContainerClass: `h-full w-full object-cover text-xl ${!(issuerInfo == null ? void 0 : issuerInfo.image) ? "pt-[3px]" : ""}`,
        user: { image: issuerInfo == null ? void 0 : issuerInfo.image, name: issuerInfo == null ? void 0 : issuerInfo.fullName },
        alt: "profile"
      }
    )), /* @__PURE__ */ React.createElement("div", { className: "notification-issuer-info-text flex items-center px-[10px]" }, /* @__PURE__ */ React.createElement("p", { className: "text-[13px] text-gray-700 font-medium" }, "From ", (issuerInfo == null ? void 0 : issuerInfo.fullName) || (issuerInfo == null ? void 0 : issuerInfo.displayName)))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mt-3 w-full" }, /* @__PURE__ */ React.createElement(
      "button",
      {
        className: `notification-claim-btn flex items-center mr-[15px] w-[143px] justify-center flex-1 rounded-[24px] border-2 border-solid font-semibold py-2 px-3 tracking-wide ${claimButtonStyles}`,
        onClick: handleButtonClick,
        role: "button",
        name: "notification-claim-button"
      },
      isClaimed && /* @__PURE__ */ React.createElement(Checkmark, { className: "h-[24px] p-0 m-0" }),
      " ",
      isLoading ? "Loading..." : buttonText
    ), /* @__PURE__ */ React.createElement(
      "button",
      {
        onClick: handleCancelClick,
        className: `rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-[0px] tracking-wide ${viewButtonStyles}`,
        role: "button",
        name: "notification-view-button"
      },
      !isArchived && /* @__PURE__ */ React.createElement("img", { src: (_a = X) != null ? _a : "", alt: "Cancel", className: "notification-card-x" }),
      isArchived && /* @__PURE__ */ React.createElement(
        "img",
        {
          src: (_b = ArrowArcLeft) != null ? _b : "",
          alt: "Cancel",
          className: "notification-card-x"
        }
      )
    ))))
  );
};

export { NotificationBoostCard as N };
//# sourceMappingURL=NotificationBoostCard-fa82a58d.js.map
