import { useContext } from 'react'
import { UserContext } from '../hooks'

interface LogoutButtonProps {
  title?: string
}

const LogoutButton = ({ title = 'Logout' }: LogoutButtonProps) => {
  const { logout } = useContext(UserContext)

  if (!logout) return <p>Loading context.</p>
  const [userLogout, { error, loading }] = logout

  return (
    <button disabled={loading} onClick={event => userLogout()}>
      {title}
    </button>
  )
}

export default LogoutButton
