import { useMutation } from '@apollo/client'
import { USER_LOGOUT, CURRENT_USER } from './graphql'
import { SyntheticEvent } from 'react'

interface LogoutButtonProps {
  title?: string
}

const LogoutButton = ({ title }: LogoutButtonProps) => {

  const [logout, { loading, error }] = useMutation(
    USER_LOGOUT,
    { refetchQueries: [{ query: CURRENT_USER }] }
  )

  return (
    <button disabled={loading} onClick={async (event: SyntheticEvent) => {
      try {
        const data = await logout()
        console.log('LogoutButton', data)
        //refetch()
      } catch (error) {
        console.log('LogoutButton', error)
      }
    }}>{title || 'Log out'}</button>
  )
}

export default LogoutButton