"use client"

import { cn } from "@/lib/utils"

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

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
}: UserAvatarProps) {
    // If no custom text, use first letter of username
    const displayText = text || username.charAt(0).toUpperCase() || "?"

    return (
        <div
            className={cn(
                "rounded-full flex items-center justify-center font-bold text-white shadow-md select-none",
                sizeClasses[size],
                className
            )}
            style={{ backgroundColor: bgColor }}
        >
            {displayText}
        </div>
    )
}