"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { IconButton } from "../../primitives/icon-button.js";
import { usePortalNotifications } from "../hooks/usePortalNotifications.js";
import { PortalNotificationPanel } from "./PortalNotificationPanel.js";
function BellIcon({ className }) {
  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
    /* @__PURE__ */ jsx("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }),
    /* @__PURE__ */ jsx("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })
  ] });
}
function PortalNotificationBell({ t }) {
  const [panelOpen, setPanelOpen] = React.useState(false);
  const {
    notifications,
    unreadCount,
    hasNew,
    markAsRead,
    dismiss,
    markAllRead
  } = usePortalNotifications();
  const [pulse, setPulse] = React.useState(false);
  const prevCountRef = React.useRef(unreadCount);
  React.useEffect(() => {
    if (hasNew && unreadCount > prevCountRef.current) {
      setPulse(true);
      const timer = setTimeout(() => setPulse(false), 1200);
      return () => clearTimeout(timer);
    }
    prevCountRef.current = unreadCount;
  }, [unreadCount, hasNew]);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs(
      IconButton,
      {
        variant: "ghost",
        size: "sm",
        type: "button",
        className: "relative",
        onClick: () => setPanelOpen(true),
        "aria-label": unreadCount > 0 ? t("portal.notifications.badge", "{count} unread", { count: unreadCount }) : t("portal.notifications.title", "Notifications"),
        children: [
          /* @__PURE__ */ jsx(BellIcon, { className: `size-[18px] ${pulse ? "animate-pulse" : ""}` }),
          unreadCount > 0 ? /* @__PURE__ */ jsx("span", { className: "absolute -right-0.5 -top-0.5 flex size-4 items-center justify-center rounded-full bg-foreground text-[9px] font-bold text-background", children: unreadCount > 99 ? "99+" : unreadCount }) : null
        ]
      }
    ),
    /* @__PURE__ */ jsx(
      PortalNotificationPanel,
      {
        open: panelOpen,
        onClose: () => setPanelOpen(false),
        notifications,
        unreadCount,
        onMarkAsRead: markAsRead,
        onDismiss: dismiss,
        onMarkAllRead: markAllRead,
        t
      }
    )
  ] });
}
export {
  PortalNotificationBell
};
//# sourceMappingURL=PortalNotificationBell.js.map
