import {Notification} from 'common/notifications'
import {Col} from 'web/components/layout/col'
import {Modal} from 'web/components/layout/modal'

import {UserAvatarAndBadge} from './widgets/user-link'

export function MultiUserReactionModal(props: {
  similarNotifications: Notification[]
  modalLabel: string
  open: boolean
  setOpen: (open: boolean) => void
}) {
  const {similarNotifications, modalLabel, open, setOpen} = props
  return (
    <Modal open={open} setOpen={setOpen} size={'sm'}>
      <Col className="bg-canvas-50 items-start gap-4 rounded-md p-6">
        <span className={'text-xl'}>{modalLabel}</span>
        {similarNotifications.map((notif) => (
          <UserAvatarAndBadge
            key={notif.sourceUserUsername}
            className="w-full"
            user={{
              id: notif.userId,
              name: notif.sourceUserName ?? 'Name',
              username: notif.sourceUserUsername ?? 'Username',
            }}
          />
        ))}
      </Col>
    </Modal>
  )
}