import UserSvg from '@/assets/icons/svg/ataver.svg';
import { ThemedText } from '@/components/ThemedText';
import { UserInfoDetails } from '@/types/user';
// import { Image } from 'expo-image';
import { Image, ScrollView, View } from 'react-native';
export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {

    return (
        <View className='flex flex-row items-center mt-[1rem] gap-[1rem]'>
            {/* 用户名 */}
            <View className='flex flex-col gap-4 w-[68vw]'>
                <View className='flex flex-row items-center justify-between w-full'>
                    <View className='flex flex-row items-center gap-2'>
                        <ThemedText
                            className='max-w-[36vw] !text-textSecondary !font-semibold !text-2xl'
                            numberOfLines={1}         // 限制为1行
                            ellipsizeMode="tail"
                        >
                            {userInfo?.user_info?.nickname}
                        </ThemedText>
                        <ScrollView
                            className='max-w-[26vw] '
                            horizontal // 水平滚动
                            showsHorizontalScrollIndicator={false} // 隐藏滚动条
                            contentContainerStyle={{
                                flexDirection: 'row',
                                gap: 8, // 间距，
                                alignItems: 'center',
                            }}
                        >
                            {
                                userInfo?.medal_infos?.map((item, index) => (
                                    <Image
                                        key={index}
                                        source={{ uri: item.url }}
                                        style={{ width: 24, height: 24 }}
                                    />
                                ))
                            }
                        </ScrollView>
                    </View>
                </View>
                <ScrollView
                    className='max-w-[68vw]'
                    horizontal // 水平滚动
                    showsHorizontalScrollIndicator={false} // 隐藏滚动条
                    contentContainerStyle={{
                        flexDirection: 'row',
                        gap: 8 // 间距
                    }}
                >
                    <ThemedText style={{ color: '#AC7E35', fontSize: 12, fontWeight: '600' }}>User ID：{userInfo?.user_info?.user_id}</ThemedText>
                </ScrollView>
            </View>
            {/* 头像 */}
            <View>
                {userInfo?.user_info?.avatar_file_url
                    ?
                    <Image
                        source={{ uri: "http://cdn.fairclip.cn/files/7348942720074911745/original_1752124481039_198d7b9a428c67f2bfd87ec128daad1b.jpg" }}
                        style={{ width: 80, height: 80, borderRadius: 40 }}
                    />
                    :
                    <UserSvg width={80} height={80} />
                }
            </View>
        </View >
    );
}