import React from 'react';
import {LucideIcon} from 'lucide-react';

type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

interface AvatarIconProps {
    size?: AvatarSize;
    image?: string | null;
    icon?: LucideIcon;
    initial?: string;
    alt?: string;
}

const sizeClasses: Record<AvatarSize, string> = {
    xs: 'w-7 h-7',
    sm: 'w-10 h-10',
    md: 'w-12 h-12',
    lg: 'w-14 h-14',
    xl: 'w-16 h-16',
};

const iconSizeClasses: Record<AvatarSize, string> = {
    xs: 'w-3.5 h-3.5',
    sm: 'w-5 h-5',
    md: 'w-6 h-6',
    lg: 'w-7 h-7',
    xl: 'w-8 h-8',
};

const initialSizeClasses: Record<AvatarSize, string> = {
    xs: 'text-xs',
    sm: 'text-sm',
    md: 'text-base',
    lg: 'text-lg',
    xl: 'text-xl',
};

export default function AvatarIcon({
                                       size = 'md',
                                       image,
                                       icon: Icon,
                                       initial,
                                       alt = '',
                                   }: AvatarIconProps): React.JSX.Element {
    return (
        <div
            className={`${sizeClasses[size]} rounded-full border-2 border-primary overflow-hidden bg-secondary transition-colors flex items-center justify-center`}
        >
            {image ? (
                <img
                    src={image}
                    alt={alt}
                    className="w-full h-full object-cover"
                />
            ) : Icon ? (
                <Icon className={`text-primary ${iconSizeClasses[size]}`} strokeWidth={1.75}/>
            ) : initial ? (
                <div
                    className={`w-full h-full flex items-center justify-center bg-primary/10 text-primary font-bold ${initialSizeClasses[size]}`}>
                    {initial}
                </div>
            ) : null}
        </div>
    );
}