"use client";

/**
 * The unread badge on a nav entry.
 *
 * Counts threads waiting on you, not messages: one busy group shouldn't read
 * as twenty things needing attention. Muted threads are excluded server-side,
 * so muting a noisy group clears the badge while its unread count stays
 * visible in the inbox.
 *
 * Wraps its icon rather than being positioned by each caller, so the sidebar
 * and bottom bar can't drift apart.
 */

import { useNotifications } from "@/components/notifications/notifications-provider";

export function NavUnreadBadge({ children }: { children: React.ReactNode }) {
  const { chatUnread } = useNotifications();
  if (chatUnread <= 0) return <>{children}</>;

  return (
    <span className="relative inline-flex">
      {children}
      <span
        // Announced through the link's aria-label instead; this is decoration.
        aria-hidden
        className="absolute -right-1.5 -top-1 min-w-4 rounded-full bg-primary px-1 text-center text-[10px] font-semibold leading-4 text-white ring-2 ring-background"
      >
        {chatUnread > 9 ? "9+" : chatUnread}
      </span>
    </span>
  );
}

/** The count, for callers that need it in an accessible name. */
export function useChatUnread(): number {
  return useNotifications().chatUnread;
}