import React, { memo } from 'react';
import Link from 'next/link';
import { Bell } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { useNotifications } from '@/hooks/use-notifications';

interface NotificationBadgeProps {
  className?: string;
}

// Use React.memo to prevent unnecessary re-renders
export const NotificationBadge = memo(function NotificationBadge({ className }: NotificationBadgeProps) {
  const { notificationCount } = useNotifications();
  const hasUnread = notificationCount.unread > 0;
  
  return (
    <div className={`relative ${className || ''}`}>
      <Link
        href='/notifications'
        className='text-white/80 hover:text-white transition-colors relative'
        aria-label={`Notifications${hasUnread ? ` (${notificationCount.unread} unread)` : ''}`}
      >
        <Bell className='w-5 h-5' />
        {hasUnread && (
          <Badge 
            variant="notification" 
            size="notification"
            className="absolute -top-2 -right-2"
          >
            {notificationCount.unread > 99 ? '99+' : notificationCount.unread}
          </Badge>
        )}
      </Link>
    </div>
  );
});