import { AccountBase } from "@/app/providers/AccountProvider/AccountProvider";
import { useAvatars } from "@/app/providers/AvatarProvider/useAvatars";
import { useUserCache } from "@/app/providers/InformationProvider/useUserCache";
import { Avatar, Flex, Text } from "@mantine/core";

interface UserAccountSelectProps {
    accountBase: AccountBase;
    selected?: boolean;
    onClick?: () => void;
}

export function UserAccountSelect(props : UserAccountSelectProps) {
    const userInfo = useUserCache(props.accountBase.publicKey);
    const avatars = useAvatars(props.accountBase.publicKey);

    return (
        <Flex w={'100%'} onClick={props.onClick} style={{
            borderRadius: 5,
            cursor: 'pointer'
        }} pl={'xs'} pr={'xs'} pt={10} pb={10} direction={'row'} justify={'space-between'} align={'center'}>
            {userInfo && (
                <Flex direction={'row'} gap={'xs'} align={'center'}>
                    <Avatar src={avatars.length > 0 ? avatars[0].avatar : undefined} size={20} color={'initials'} name={userInfo.title}></Avatar>
                    <Flex direction={'column'}>
                        <Text fw={500} style={{
                            textOverflow: 'ellipsis',
                            whiteSpace: 'nowrap',
                            overflow: 'hidden',
                            width: 100,
                        }} size="xs">{userInfo.title}</Text>
                    </Flex>
                </Flex>
            )}           
        </Flex>
    );
}