import { Avatar as MuiAvatar, AvatarProps as MuiAvatarProps } from '@mui/material';
import './avatat.scss';


export interface AvatarProps extends MuiAvatarProps {
    id?: string,
    onClickAvatar?: (id: string) => void,
    label?: string
}

const Avatar = ({ id, onClickAvatar, label, ...rest }: AvatarProps) => {
    const handleClick = () => {
        if (onClickAvatar && id) {
            onClickAvatar(id);
        }
    };

    const stringAvatar = (name: string) => {
        const splitName = name.split(' ')
        return {
            children: splitName.length > 1 ? `${splitName[0][0]}${splitName[1][0]}` : `${splitName[0][0]}`,
        };
    }

    return (
        <div className='avatar-container' onClick={handleClick} >
            <MuiAvatar {...rest} {...label ? { ...stringAvatar(label as string) } : {}} className={`${label ? 'text-avatar-color' : ''}`}></MuiAvatar>
        </div>
    );

}
export default Avatar;