import { FC } from 'react';

import ListItem from '@material-hu/mui/ListItem';
import ListItemAvatar from '@material-hu/mui/ListItemAvatar';
import ListItemText from '@material-hu/mui/ListItemText';

import { User } from 'src/types/user';
import { getFullName } from 'src/utils/userUtils';
import ProfilePicture from 'src/components/user/ProfilePicture';

type Props = {
  user: User;
};
const SelectMembersListItem: FC<Props> = ({ user }) => {
  return (
    <ListItem sx={{ py: 0, px: 0 }}>
      <ListItemAvatar sx={{ minWidth: 'unset', mr: 1 }}>
        <ProfilePicture
          user={{ id: user.id, profilePicture: user.profilePicture }}
        />
      </ListItemAvatar>
      <ListItemText
        primary={getFullName(user)}
        primaryTypographyProps={{
          noWrap: true,
          variant: 'globalS',
        }}
      />
    </ListItem>
  );
};

export default SelectMembersListItem;