/**
* NotificationBell Component
*
* Bell icon with unread badge, opens notification panel on click
*/
'use client';
import { useState, useRef, useEffect } from 'react';
import { Bell } from 'lucide-react';
import { useNotifications } from '@/hooks/useNotifications';
import { NotificationsPanel } from './NotificationsPanel';
import { Button } from '@/components/ui/button';
export function NotificationBell() {
const { unreadCount } = useNotifications();
const [isOpen, setIsOpen] = useState(false);
const panelRef = useRef<HTMLDivElement>(null);
const buttonRef = useRef<HTMLButtonElement>(null);
// Close panel on outside click
useEffect(() => {
function handleClickOutside(event: MouseEvent) {
if (
panelRef.current &&
!panelRef.current.contains(event.target as Node) &&
buttonRef.current &&
!buttonRef.current.contains(event.target as Node)
) {
setIsOpen(false);
}
}
if (isOpen) {
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}
}, [isOpen]);
return (
<div className="relative">
<Button
ref={buttonRef}
variant="ghost"
size="icon"
onClick={() => setIsOpen(!isOpen)}
className="relative"
aria-label="Notifications"
>
<Bell className="h-5 w-5" />
{unreadCount > 0 && (
<span className="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs font-bold text-white">
{unreadCount > 9 ? '9+' : unreadCount}
</span>
)}
</Button>
{isOpen && (
<div ref={panelRef}>
<NotificationsPanel onClose={() => setIsOpen(false)} />
</div>
)}
</div>
);
}
