"use client";

/**
 * NotificationBell — header affordance for signed-in users. Links to the
 * /notifications page and shows a dot when there are unread items.
 *
 * The unread count is read from NotificationsProvider, which seeds it from
 * the REST endpoint and keeps it live over the Soketi WebSocket. Visiting
 * the page marks everything read and clears the badge.
 */

import Link from "next/link";
import { Bell } from "lucide-react";
import { useNotifications } from "@/components/notifications/notifications-provider";

export function NotificationBell() {
  const { unread } = useNotifications();

  return (
    <Link
      href="/notifications"
      aria-label={
        unread > 0 ? `Notifications (${unread} unread)` : "Notifications"
      }
      className="relative size-9 inline-flex items-center justify-center rounded-lg text-foreground hover:bg-muted transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring"
    >
      <Bell className="size-5" />
      {unread > 0 ? (
        <span className="absolute top-1.5 right-1.5 size-2 rounded-full bg-primary ring-2 ring-background" />
      ) : null}
    </Link>
  );
}