Notification Bell

Create a notification bell icon that displays a badge with the number of unread notifications and shows a dropdown list of notifications when clicked.

Requirements:

• Display a bell icon with a notification badge showing unread count
• Show dropdown list of notifications when bell is clicked
• Display notification details (title, message, timestamp)
• Mark notifications as read when clicked
• Update badge count when notifications are read
• Close dropdown when clicking outside or on bell again
• Show different styles for read/unread notifications
• Include "Mark all as read" button in dropdown
• Handle empty notification state
• Use proper accessibility attributes for screen readers

Elements and Attributes for Testing:

• Bell Icon - Must have data-testid="notification-bell" and onClick handler
• Badge - Must display unread count and have data-testid="notification-badge"
• Dropdown - Must have data-testid="notification-dropdown" when open
• Notification Items - Must have data-testid="notification-item" and onClick handler
• Mark All Button - Must contain text "Mark all as read" and have onClick handler
• Empty State - Must show "No notifications" when array is empty
• Read/Unread States - Must apply different styling based on read status