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>
    )
}