import { makeStyles } from '@material-ui/core'
import { TPinnedMessages } from '../../../../../typescript/redux/pinnedMessages/types' 

const useStyles = makeStyles({
  unpinBar: {   
    backgroundColor: '#ffffff',
    color:'#2b97fd',
    display: 'flex',
    justifyContent: 'center',
    alignContent: 'center',
    alignItems: 'center',
    width: '100%',
    height: '7vh',
    position: 'fixed',
    cursor:'pointer',
    bottom: '0vh',
    fontSize:18,
    '&:hover': {
      color: '#0084ff',
    }
  },    
})

interface IUnpinBar {
  pinnedMessagesMemo: TPinnedMessages,
  handleUnpinAll: () => void,
}

const UnpinBar = ({pinnedMessagesMemo,handleUnpinAll}:IUnpinBar) => {
  const classes = useStyles()   

  return (
      <div onClick={handleUnpinAll}  className={classes.unpinBar}>
        {`UNPIN ALL ${pinnedMessagesMemo.length} MESSAGES`}
      </div>
    )
}

export default UnpinBar