import type { ReactNode } from 'react'
import EmojiText from 'src/components/common/EmojiText'
import type { CustomEmoji } from 'src/lib/api-types'
import { Text, View, XStack, YStack } from 'tamagui'
import UserAvatar from './UserAvatar'

type Props = {
  account: {
    id: string
    avatar: string
    display_name?: string
    acct: string
    emojis?: Array<CustomEmoji>
  }
  subtitle?: string
  action?: ReactNode
  onPress?: () => void
}

export function UserRow({ account, subtitle, action, onPress }: Props) {
  return (
    <XStack
      px="$4"
      py="$3"
      gap="$3"
      alignItems="center"
      onPress={onPress}
      pressStyle={onPress ? { opacity: 0.7 } : undefined}
    >
      <UserAvatar url={account.avatar} />
      <YStack flex={1} gap="$1">
        {account.display_name ? (
          <EmojiText
            text={account.display_name}
            emojis={account.emojis}
            fontWeight="bold"
            color="$color"
            numberOfLines={1}
          />
        ) : (
          <Text fontWeight="bold" color="$color" numberOfLines={1}>
            @{account.acct}
          </Text>
        )}
        {account.display_name ? (
          <Text fontSize="$3" color="$colorSecondary" numberOfLines={1}>
            @{account.acct}
          </Text>
        ) : subtitle ? (
          <Text fontSize="$3" color="$colorSecondary" numberOfLines={1}>
            {subtitle}
          </Text>
        ) : null}
      </YStack>
      {action && <View>{action}</View>}
    </XStack>
  )
}
