import React,{ useState,useEffect } from 'react';

// You'll need to add correct paths below
import AccountCircleIcon from './AccountCircleIcon';
import TableCell from './TableCell';
import TableRow from './TableRow';
import Chip from './Chip';

const ChipContainer = props => {
  // State is initialized here
  const [selectedUsersToDelete,setSelectedUsersToDelete] = useState([]);

  // Props destructred
  const { classes } = props;

  // Just an example showing how you can set state once componnent has mounted
  useEffect(
    () =>
      void setSelectedUsersToDelete([
        'user1','user2','user3','user4','user5'
      ]),[]
  );

  return (
    <div className={classes.chipContainer}>
      <TableRow>
        {selectedUsersToDelete.map((user,index) => (
          <TableCell>
            <Chip
              key={index}
              className={classes.chips}
              size="large"
              label={user}
              icon={<AccountCircleIcon className={classes.closeIcon} />}
            />
          </TableCell>
        ))}
      </TableRow>
    </div>
  );
};

export default ChipContainer;