import { useNotifications } from '@/hooks/useNotifications'
import { useNotificationCenter } from '@/hooks/useNotificationCenter'
import { NotificationBadgeButton } from './NotificationBadgeButton'
import { NotificationPanel } from './NotificationPanel'

interface NotificationCenterProps {
  userPubkey: string | null
  onClose?: () => void
}

export function NotificationCenter({ userPubkey, onClose }: NotificationCenterProps) {
  const {
    notifications,
    unreadCount,
    markAsRead,
    markAllAsRead,
    deleteNotification: deleteNotificationHandler,
  } = useNotifications(userPubkey)
  const { isOpen, handleToggle, handleNotificationClick } = useNotificationCenter(
    markAsRead,
    onClose
  )

  if (!userPubkey) {
    return null
  }

  return (
    <div className="relative">
      <NotificationBadgeButton unreadCount={unreadCount} onClick={handleToggle} />
      {isOpen && (
        <NotificationPanel
          notifications={notifications}
          unreadCount={unreadCount}
          onNotificationClick={handleNotificationClick}
          onDelete={deleteNotificationHandler}
          onMarkAllAsRead={markAllAsRead}
          onClose={handleClose}
        />
      )}
    </div>
  )
}