import Link from 'next/link'
import {signOut} from 'next-auth/client'
import {withStyles, makeStyles, Tooltip, Fab, Zoom} from '@material-ui/core'
import ExitToAppIcon from '@material-ui/icons/ExitToApp'

const useStyles = makeStyles(() => ({
  dekoneksyon: {
    position: 'absolute',
    right: 5
  }
}))

const DekoneksonTooltip = withStyles(() => ({
  tooltip: {
    fontSize: 18
  }
}))(Tooltip)

function Dekoneksyon() {
  const classes = useStyles()

  const handleLogout = event => {
    event.preventDefault()
    signOut()
  }

  return (
    <Link href='/api/auth/signout'>
      <DekoneksonTooltip title='Dékoneksyon' placement='left' TransitionComponent={Zoom}>
        <Fab
          className={classes.dekoneksyon}
          color='secondary'
          aria-label='logout'
          size='small'
          onClick={event => handleLogout(event)}
        >
          <ExitToAppIcon />
        </Fab>
      </DekoneksonTooltip>
    </Link>
  )
}

export default Dekoneksyon