import React, { useState, useEffect } from 'react';
import X from './X.svg';
import { U as UserNotificationTypeStyles } from './types-b32d28d5.js';
import { U as UserNotificationTypeEnum } from './notifications-009bbd80.js';
import { C as Checkmark } from './Checkmark-724d5d17.js';
import ArrowArcLeft from './ArrowArcLeft.svg';

const NotificationUserCard = ({
  title,
  customThumbComponent,
  className,
  thumbImage,
  issueDate,
  acceptStatus = false,
  loadingState = false,
  handleButtonClick,
  handleCancelClick,
  isArchived
}) => {
  var _a, _b;
  const [isAccepted, setisAccepted] = useState(acceptStatus || false);
  const [isLoading, setIsLoading] = useState(loadingState || false);
  useEffect(() => {
    setisAccepted(acceptStatus);
  }, [acceptStatus]);
  useEffect(() => {
    setIsLoading(loadingState);
  }, [loadingState]);
  const { textStyles, viewButtonStyles, claimedButtonStyles, unclaimedButtonStyles, typeText } = UserNotificationTypeStyles[UserNotificationTypeEnum.ConnectionRequest];
  const claimButtonStyles = isAccepted ? claimedButtonStyles : unclaimedButtonStyles;
  let buttonText = "";
  if (isAccepted) {
    buttonText = "Accepted";
  } else if (!isAccepted) {
    buttonText = "Accept";
  }
  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",
      {
        className: `overflow-hidden cursor-pointer w-[68px] h-[68px] rounded-full flex items-start notification-card-thumbnail`
      },
      /* @__PURE__ */ React.createElement(
        "img",
        {
          src: thumbImage,
          alt: "Notification Thumb",
          className: "w-full h-full w-[68px] h-[68px] 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",
      {
        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
      )
    ), /* @__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"
      },
      isAccepted && /* @__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 { NotificationUserCard as N };
//# sourceMappingURL=NotificationUserCard-2c29c86a.js.map
