import React from 'react';
import Tooltip from './Tooltip';

interface AvatarProps {
    src?: string;
    alt?: string;
    name?: string; // for initials
    size?: 'sm' | 'md' | 'lg';
    tooltip?: string;
}

const sizeClasses = {
    sm: 'w-10 h-10 text-sm',
    md: 'w-12 h-12 text-base',
    lg: 'w-16 h-16 text-lg',
};

const Avatar: React.FC<AvatarProps> = ({
    src,
    alt = 'avatar',
    name,
    size = 'md',
    tooltip,
}) => {
    const baseClass = `
        ${sizeClasses[size]}
        rounded-full
        object-cover
        flex items-center justify-center
        bg-gray-200 text-white border-primary border border-2
        ring-2 ring-white
        relative
        transition-all duration-300
        hover:translate-x-2
        overflow-hidden
    `;

    const avatarContent = src ? (
        <img src={src} alt={alt} className={baseClass} />
    ) : (
        <span className={baseClass}>
            {name?.slice(0, 2).toUpperCase()}
        </span>
    );

    return tooltip ? (
        <Tooltip content={tooltip}>
            {avatarContent}
        </Tooltip>
    ) : (
        avatarContent
    );
};

export default Avatar;