import { GroupsGroupResource } from '../../../types'
import { pluralize } from '../../../utils'
import { RecipientLinkRow } from './recipient_link_row'

interface GroupsRecipientRowProps {
  group: GroupsGroupResource
  onPress: (group: GroupsGroupResource) => void
}

export const GroupsRecipientRow = ({ group, onPress }: GroupsRecipientRowProps) => {
  const groupAccessibilityLabel = `Select ${group.name} with ${pluralize(group.membershipsCount, 'member')}`

  return (
    <RecipientLinkRow
      imageUri={group.headerImage?.medium}
      title={group.name}
      subtitle={`${group.membershipsCount} members`}
      onPress={() => onPress(group)}
      accessibilityLabel={groupAccessibilityLabel}
      accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation`}
    />
  )
}