import { t } from "@lingui/core/macro";
import { useWS } from "../hooks/useWS.ts";
import { useChat } from "../hooks/useChat.ts";

/** Header chat button with an unread-message badge. Opens the app-wide chat. */
export function ChatButton() {
  const { unreadChatCount } = useWS();
  const { openChat } = useChat();

  return (
    <button
      type="button"
      className="chat-button"
      onClick={openChat}
      aria-label={unreadChatCount > 0
        ? t`Chat (${unreadChatCount} unread)`
        : t`Chat`}
    >
      <span className="chat-button-icon">💬</span>
      {unreadChatCount > 0 && (
        <span className="notification-badge">
          {unreadChatCount > 99 ? "99+" : unreadChatCount}
        </span>
      )}
    </button>
  );
}