import React from 'react'
import { StyleSheet, View, type ViewStyle } from 'react-native'
import { MemberResource } from '../../types'
import { platformFontWeightMedium } from '../../utils/styles'
import { Avatar } from './avatar'
import { Badge } from './badge'
import { Text } from './text'

// =================================
// ====== Components ===============
// =================================

interface PersonProps {
  person: MemberResource
  style?: ViewStyle
}

export function Person({ person, style }: PersonProps) {
  const styles = useStyles()

  return (
    <View style={[styles.wrapper, style]}>
      <Avatar sourceUri={person.avatar} />
      <View style={styles.content}>
        <Text style={styles.name} numberOfLines={2}>
          {person.name}
        </Text>
        <View style={styles.badges}>
          {person.badges?.map((badge, index) => <Badge key={index} label={badge.title} />)}
        </View>
      </View>
    </View>
  )
}

// =================================
// ====== Styles ===================
// =================================

const useStyles = () => {
  return StyleSheet.create({
    wrapper: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 8,
    },
    content: {
      gap: 2,
      flexShrink: 1,
    },
    name: {
      fontWeight: platformFontWeightMedium,
    },
    badges: {
      flexDirection: 'row',
      gap: 4,
    },
  })
}