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

export interface NotificationListProps {
  client: NotificationClient
  emptyState?: ReactNode
}

export function NotificationList({ client, emptyState }: NotificationListProps) {
  const { items, loading, markRead, hasMore, loadMore } = useNotifications(client)

  if (items.length === 0 && !loading) {
    return <>{emptyState ?? null}</>
  }

  return (
    <div aria-live="polite">
      <DataList
        items={items.map((item) => ({
          term: item.title,
          value: (
            <>
              {item.body ? <span>{item.body}</span> : null}
              <button
                type="button"
                aria-label={`Mark "${item.title}" read`}
                onClick={() => void markRead([item.id])}
              >
                Mark read
              </button>
            </>
          ),
        }))}
      />
      {hasMore ? (
        <button type="button" onClick={() => void loadMore()}>
          Load more
        </button>
      ) : null}
    </div>
  )
}