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 ArrowArcLeft from './ArrowArcLeft.svg';

const NotificationUserAcceptedBoostCard = ({
  title,
  customThumbComponent,
  className,
  thumbImage,
  notificationType = UserNotificationTypeEnum.AcceptedBoost,
  issueDate,
  loadingState = false,
  handleCancelClick,
  isArchived
}) => {
  var _a, _b;
  const [isLoading, setIsLoading] = useState(loadingState || false);
  useEffect(() => {
    setIsLoading(loadingState);
  }, [loadingState]);
  const { textStyles, viewButtonStyles, typeText } = UserNotificationTypeStyles[notificationType];
  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 w-[50px] h-[50px] rounded-full flex items-start notification-card-thumbnail`
      },
      /* @__PURE__ */ React.createElement(
        "img",
        {
          src: thumbImage,
          alt: "Notification Thumb",
          className: "w-full h-full w-[50px] h-[50px] 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: "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"
        },
        typeText && "\u2022",
        " ",
        issueDate
      )
    ), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-end w-full mt-3" }, /* @__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 { NotificationUserAcceptedBoostCard as N };
//# sourceMappingURL=NotificationUserAcceptedBoostCard-89fe2317.js.map
