import { VStack } from '@/components/ui/vstack';
import { Avatar, AvatarImage, AvatarFallbackText } from "@/components/ui/avatar";
import { Heading } from "@/components/ui/heading";
import { Box } from '@/components/ui/box';

export default function UserBlock({ user }) {
      
      return (
      <Box className="rounded-md bg-white p-4 items-center justify-center mb-6" >
      <VStack space="md" className='items-center'>
        <Avatar>
          <AvatarFallbackText>{user.firstName} {user.lastName}</AvatarFallbackText>
          <AvatarImage
            source={{
              uri: user.image,
            }}
          />
        </Avatar>
          <Heading size="sm">{user.firstName} {user.lastName}</Heading>
      </VStack>
      </Box>
      );
}