'use strict';

var React = require('react');
var X = require('./X.svg');
var types = require('./types-e4d9a257.js');
var notifications = require('./notifications-56c6fc94.js');
var ArrowArcLeft = require('./ArrowArcLeft.svg');

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

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var X__default = /*#__PURE__*/_interopDefaultLegacy(X);
var ArrowArcLeft__default = /*#__PURE__*/_interopDefaultLegacy(ArrowArcLeft);

const NotificationUserAcceptedBoostCard = ({
  title,
  customThumbComponent,
  className,
  thumbImage,
  notificationType = notifications.UserNotificationTypeEnum.AcceptedBoost,
  issueDate,
  loadingState = false,
  handleCancelClick,
  isArchived
}) => {
  var _a, _b;
  const [isLoading, setIsLoading] = React.useState(loadingState || false);
  React.useEffect(() => {
    setIsLoading(loadingState);
  }, [loadingState]);
  const { textStyles, viewButtonStyles, typeText } = types.UserNotificationTypeStyles[notificationType];
  return /* @__PURE__ */ React__default["default"].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__default["default"].createElement("div", { className: "notification-card-left-side px-[0px] flex" }, !customThumbComponent && /* @__PURE__ */ React__default["default"].createElement(
      "div",
      {
        className: `overflow-hidden w-[50px] h-[50px] rounded-full flex items-start notification-card-thumbnail`
      },
      /* @__PURE__ */ React__default["default"].createElement(
        "img",
        {
          src: thumbImage,
          alt: "Notification Thumb",
          className: "w-full h-full w-[50px] h-[50px] object-cover"
        }
      )
    ), customThumbComponent && customThumbComponent),
    /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-col justify-center items-start relative w-full" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "text-left ml-3 flex flex-col items-start justify-start w-full" }, /* @__PURE__ */ React__default["default"].createElement(
      "h4",
      {
        className: "font-bold tracking-wide line-clamp-2 text-black text-[14px] pr-[20px] notification-card-title",
        "data-testid": "notification-title"
      },
      title
    ), /* @__PURE__ */ React__default["default"].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__default["default"].createElement(
        "span",
        {
          className: "text-grayscale-600 normal-case font-normal text-[12px] notification-card-type-issue-date",
          "data-testid": "notification-cred-issue-date"
        },
        typeText && "\u2022",
        " ",
        issueDate
      )
    ), /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex items-center justify-end w-full mt-3" }, /* @__PURE__ */ React__default["default"].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__default["default"].createElement("img", { src: (_a = X__default["default"]) != null ? _a : "", alt: "Cancel", className: "notification-card-x" }),
      isArchived && /* @__PURE__ */ React__default["default"].createElement(
        "img",
        {
          src: (_b = ArrowArcLeft__default["default"]) != null ? _b : "",
          alt: "Cancel",
          className: "notification-card-x"
        }
      )
    ))))
  );
};

exports.NotificationUserAcceptedBoostCard = NotificationUserAcceptedBoostCard;
//# sourceMappingURL=NotificationUserAcceptedBoostCard-1c6d1e33.js.map
