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";
import { Link } from "expo-router";

export default function UserBlock({ user }) {
  return (
    <Link href={`/user/${user.id}`}>
      <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 ||
                  "https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain",
              }}
            />
          </Avatar>
          <Heading size="sm">
            {user.firstName} {user.lastName}
          </Heading>
        </VStack>
      </Box>
    </Link>
  );
}