import { useUnreadNotifications } from "@/hooks/useUnreadNotifications";

export function NotificationBadge({ className = "" }: { className?: string }) {
  const { count } = useUnreadNotifications();
  if (count <= 0) return null;
  return (
    <span
      className={`absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 rounded-full bg-destructive text-destructive-foreground text-[10px] font-bold leading-[18px] text-center grid place-items-center ${className}`}
    >
      {count > 99 ? "99+" : count}
    </span>
  );
}