import type {FriendRequest} from '@crumbs/core/schemas'

import {ActionableRow} from '@/components/actionable-row'
import {List} from '@/components/ui/list'
import {useBusyAction} from '@/hooks/use-busy-action'
import {useAcceptRequest, useDeclineRequest} from '@/stores/friends'

type RequestListProps = {
  requests: FriendRequest[]
  emptyMessage?: string
}

export const RequestList = ({
  requests,
  emptyMessage = 'No friend requests',
}: RequestListProps) => {
  const accept = useAcceptRequest()
  const decline = useDeclineRequest()
  const {busy, run} = useBusyAction()

  return (
    <List
      items={requests}
      emptyMessage={emptyMessage}
      renderItem={(request) => (
        <ActionableRow
          href={`/profile/${request.requester.id}`}
          accessibilityLabel={`@${request.requester.handle}`}
          avatar={{
            handle: request.requester.handle,
            uri: request.requester.avatarUrl,
          }}
          title={`@${request.requester.handle}`}
          busy={busy === request.id}
          onAccept={() => void run(request.id, accept)}
          onDecline={() => void run(request.id, decline)}
        />
      )}
    />
  )
}
