import { Badge } from '@platform-modules/ui-primitives'
import { useNotifications } from './useNotifications.js'
import type { NotificationClient } from './client.js'

export interface NotificationBellProps {
  client: NotificationClient
  onOpen?(): void
}

export function NotificationBell({ client, onOpen }: NotificationBellProps) {
  const { unread } = useNotifications(client)

  return (
    <button type="button" aria-label={`${unread} unread notifications`} onClick={onOpen}>
      Notifications
      {unread > 0 ? <Badge>{unread}</Badge> : null}
    </button>
  )
}