import * as React from 'react';
import { cn } from '@/lib/utils';
import { Avatar, AvatarFallback, AvatarImage } from './avatar';

export interface UserAvatarProps {
    name: string;
    email?: string;
    image?: string;
    size?: 'sm' | 'md' | 'lg';
    showInfo?: boolean;
    subtitle?: string;
    action?: React.ReactNode;
    className?: string;
}

const sizeClasses = {
    sm: 'h-6 w-6',
    md: 'h-9 w-9',
    lg: 'h-12 w-12',
};

function getInitials(name: string): string {
    return name
        .split(' ')
        .map(part => part[0])
        .slice(0, 2)
        .join('')
        .toUpperCase();
}

const UserAvatar = React.memo(function UserAvatar({
    name,
    email,
    image,
    size = 'md',
    showInfo = false,
    subtitle,
    action,
    className,
}: UserAvatarProps) {
    const initials = getInitials(name);

    if (!showInfo) {
        return (
            <Avatar className={cn(sizeClasses[size], className)}>
                {image && <AvatarImage src={image} alt={name} />}
                <AvatarFallback>{initials}</AvatarFallback>
            </Avatar>
        );
    }

    return (
        <div className={cn('flex items-center gap-3', className)}>
            <Avatar className={sizeClasses[size]}>
                {image && <AvatarImage src={image} alt={name} />}
                <AvatarFallback>{initials}</AvatarFallback>
            </Avatar>
            <div className="flex-1 min-w-0">
                <p className="text-sm font-medium leading-none truncate">{name}</p>
                {(email || subtitle) && (
                    <p className="text-sm text-muted-foreground truncate">
                        {subtitle || email}
                    </p>
                )}
            </div>
            {action}
        </div>
    );
});

export { UserAvatar };