import HuListItem from '@material-hu/components/design-system/List/components/ListItem';

import { User } from 'src/types/user';
import { getFullname, getInitials } from 'src/utils/userUtils';

type Props = {
  user: User;
};

const UserProfile = ({ user }: Props) => {
  const fullName = getFullname(user);

  return (
    <HuListItem
      sx={{
        '& .MuiTypography-root': {
          fontWeight: 'fontWeightRegular',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
          maxWidth: 300,
        },
        '& .MuiListItem-root': { pl: 0 },
      }}
      avatar={{
        src: user.profilePicture || '',
        text: (!user.profilePicture && getInitials(fullName)) || '',
        color: 'primary',
      }}
      text={{
        title: fullName,
        description: user.employeeInternalId,
      }}
    />
  );
};

export default UserProfile;