import { Flex, Paper, Text } from "@mantine/core";
import { VerifiedBadge } from "../VerifiedBadge/VerifiedBadge";
import { ActionAvatar } from "../ActionAvatar/ActionAvatar";

interface ProfileCardProps {
    title: string;
    publicKey: string;
    username: string;
    verified: number;
}

export function ProfileCard(props : ProfileCardProps) {
    return (
        <Paper radius="md" p="lg" bg={'transparent'}>
            <ActionAvatar title={props.title} publicKey={props.publicKey} />
            <Flex align={'center'} mt={'md'} justify={'center'} gap={5}>
                <Text ta="center" fz="lg" fw={500}>{props.title.trim() || props.publicKey.slice(0, 10)}</Text>
                {props.verified > 0 && <VerifiedBadge verified={props.verified}></VerifiedBadge>}
            </Flex>
            <Text ta="center" c="dimmed" fz="sm">
                {props.username.trim() == "" ? "" :
                 "@" + props.username + " •"} {props.publicKey.slice(0, 3) + "..." +
                     props.publicKey.slice(-3)}
            </Text>
        </Paper>
    );
}