'use client'

import PropTypes from 'prop-types'
import {signOut} from 'next-auth/react'
import {useRouter} from 'next/navigation'
import Box from '@mui/material/Box'
import Stack from '@mui/material/Stack'
import Fab from '@mui/material/Fab'
import Tooltip from '@mui/material/Tooltip'
import LogoutIcon from '@mui/icons-material/Logout'
import LoginIcon from '@mui/icons-material/Login'
import PersonAddIcon from '@mui/icons-material/PersonAdd'

export default function Sign({session}) {
  const router = useRouter()

  return (
    <Box sx={{display: 'flex', justifyContent: 'center', marginTop: 1}}>
      {session ? (
        <Tooltip title='Se déconnecter' placement='left'>
          <Fab size='small' color='error' onClick={() => signOut()}>
            <LogoutIcon fontSize='small' />
          </Fab>
        </Tooltip>
      ) : (
        <Stack direction='row' spacing={2}>
          <Tooltip title='Se connecter' placement='left'>
            <Fab size='small' color='success' onClick={() => router.push('/login')}>
              <LoginIcon fontSize='small' />
            </Fab>
          </Tooltip>
          <Tooltip title='S’enregistrer' placement='right'>
            <Fab size='small' color='success' onClick={() => router.push('/register')}>
              <PersonAddIcon fontSize='small' />
            </Fab>
          </Tooltip>
        </Stack>
      )}
    </Box>
  )
}

Sign.propTypes = {
  session: PropTypes.object
}