import { Avatar, Badge, Card, Flex, Separator, Text } from "@radix-ui/themes";
import { useAtomValue } from "jotai";
import { userAtom } from "../../AtomStore/AtomStore";

type TUserCard = {
    username?: string;
    userId?: string;
};

export default function UserCard(props: TUserCard) {
    const user = useAtomValue(userAtom);

    const getInitials = (username: string): string => {
        const result = username
            .split(" ")
            .map((word) => word[0].toUpperCase())
            .join("");

        return result;
    };

    const getUsername = (): string => {
        if (!user || props.username) return props.username || "Nothing";
        return user.username;
    };

    return (
        <Card>
            <Flex gap={"2"} direction={"column"}>
                <Flex direction={"row"} gap={"2"} align={"center"}>
                    <Avatar
                        fallback={<div>{getInitials(getUsername())}</div>}
                        radius="full"
                    />
                    <Flex className="flex-col ">
                        <Text>Test User</Text>
                        <Text size={"1"} color={"gray"}>
                            @testuser123
                        </Text>
                    </Flex>
                </Flex>
                <Separator size={"4"} />
                <Flex gap={"2"}>
                    <Badge>test</Badge>
                    <Badge color="amber">user</Badge>
                    <Badge color="red">admin</Badge>
                </Flex>
            </Flex>
        </Card>
    );
}