import { ScrollView, Text, View } from '@tarojs/components'
import Avatar from '@/components/ui/Avatar'
import Icon from '@/components/ui/Icon'
import type { ActiveUser } from '@/types/domain'
import './index.scss'

interface ActiveUserRowProps {
  users: ActiveUser[]
  onSelect?: (user: ActiveUser) => void
  onDiscover?: () => void
  showDiscover?: boolean
}

export function ActiveUserRow({ users, onSelect, onDiscover, showDiscover = true }: ActiveUserRowProps) {
  if (!showDiscover && users.length === 0) return null

  return (
    <ScrollView scrollX className='active-user-row' showScrollbar={false}>
      <View className='active-user-row__inner'>
        {showDiscover ? (
          <View className='active-user-row__item' onClick={onDiscover}>
            <View className='active-user-row__avatar-wrap active-user-row__add'>
              <Icon name='plus' size={22} />
            </View>
            <Text className='active-user-row__name'>找汪友</Text>
          </View>
        ) : null}
        {users.map(user => (
          <View key={user.id} className='active-user-row__item' onClick={() => onSelect?.(user)}>
            <View className='active-user-row__avatar-wrap'>
              <Avatar avatarKey={user.avatarKey} avatarUrl={user.avatarUrl} size='lg' label={user.name} />
              {user.live ? <Text className='active-user-row__live'>LIVE</Text> : null}
            </View>
            <Text className='active-user-row__name'>{user.name}</Text>
          </View>
        ))}
      </View>
    </ScrollView>
  )
}

export default ActiveUserRow
