"use client";

import { Bell } from "lucide-react";
import { useNotifications } from "@/contexts/NotificationsContext";
import { Link } from "@/lib/router";

export default function NotificationsBell() {
  const { unreadCount } = useNotifications();

  return (
    <Link
      to="/notifications"
      aria-label={unreadCount ? `اعلان‌ها، ${unreadCount} خوانده‌نشده` : "اعلان‌ها"}
      className="relative inline-flex h-10 w-10 items-center justify-center rounded-full text-foreground transition hover:bg-background/45"
    >
      <Bell className="h-5 w-5" aria-hidden="true" />
      {unreadCount > 0 ? (
        <span className="absolute -left-1 -top-1 flex min-w-5 items-center justify-center rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground">
          {unreadCount > 9 ? "9+" : unreadCount}
        </span>
      ) : null}
    </Link>
  );
}