import type { PartialUser } from "~/lib/api/types";
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";

interface UserAvatarProps {
    user: PartialUser | undefined;
}

export default function UserAvatar({
    user,
    ...props
}: UserAvatarProps & React.ComponentProps<typeof Avatar>) {
    return (
        <Avatar {...props}>
            <AvatarImage src={user?.avatarUrl} />
            <AvatarFallback className="text-muted-foreground">
                {user?.username?.[0]}
            </AvatarFallback>
        </Avatar>
    );
}