FINAL-PROJECT-FRONT/src/components/HomePage/LeftBar/SettingsBar/SettingsMenu/index.tsx

import { useSelector } from 'react-redux';
import Paper from '@mui/material/Paper';
import MenuList from '@mui/material/MenuList';
import MenuItem from '@mui/material/MenuItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemIcon from '@mui/material/ListItemIcon';
import PhoneIcon from '@mui/icons-material/Phone';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { makeStyles } from '@material-ui/core'

import { getNumber } from '../../../../../redux/authorization/selector'
import { copied} from '../../../../../helpers';

const useStyles = makeStyles({
    container: {
    width: '100%',
    backgroundColor: '#ffffff',  
    },
})


const SettingsMenu = () => {
  const classes = useStyles()
  const number = useSelector(getNumber)

  return (
    <Paper className={classes.container}>
      <MenuList>
        <CopyToClipboard onCopy={() => copied('Number')} text={number}>
           <MenuItem>
              <ListItemIcon style={{marginRight:15}}>
                <PhoneIcon fontSize="medium" />
              </ListItemIcon>
              <ListItemText primary={number} secondary='Copy number' />
            </MenuItem>
          </CopyToClipboard>   
      </MenuList>
    </Paper>
  );
}

export default SettingsMenu