import React from 'react';
import {shallowEqual} from 'react-redux';
import {Avatar} from '@components/Image/components/Avatar';
import {
  AvatarWithName,
  AvatarWithNameProps,
} from '@components/Image/components/AvatarWithName';
import {useAppSelector} from '@redux/utils';

interface UserAvatarProps extends Omit<AvatarWithNameProps, 'url' | 'name'> {
  withName?: boolean;
}

/**
 * @deprecated Use `_HuGo/Avatar` instead
 */
export function UserAvatar({withName, ...props}: UserAvatarProps) {
  const {profilePicture, firstName, lastName} = useAppSelector(
    ({user}) => ({
      profilePicture: user.profilePicture,
      firstName: user.firstName,
      lastName: user.lastName,
    }),
    shallowEqual,
  );
  const AvatarComponent = withName ? AvatarWithName : Avatar;
  return (
    <AvatarComponent
      url={profilePicture}
      name={{firstName, lastName}}
      {...props}
    />
  );
}

export default UserAvatar;
