import { cn } from "@/lib/utils"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

interface UserAvatarProps {
    bgColor?: string
    text?: string
    username?: string
    size?: "sm" | "md" | "lg" | "xl"
    className?: string
    src?: string | null
}

const sizeClasses = {
    sm: "h-8 w-8 text-xs",
    md: "h-10 w-10 text-sm",
    lg: "h-16 w-16 text-xl",
    xl: "h-32 w-32 text-4xl",
}

export function UserAvatar({
    bgColor = "#3B82F6",
    text,
    username = "",
    size = "md",
    className,
    src
}: UserAvatarProps) {
    // If no custom text, use first letter of username
    const displayText = text || username.charAt(0).toUpperCase() || "?"

    return (
        <Avatar className={cn(sizeClasses[size], className)}>
            <AvatarImage src={src || undefined} alt={username} />
            <AvatarFallback
                className="font-bold text-white"
                style={{ backgroundColor: bgColor }}
            >
                {displayText}
            </AvatarFallback>
        </Avatar>
    )
}