import React from 'react'
import { useStorage } from '../lib/use-storage'
import { signOut, isSignedIn, TOKEN_STORAGE_KEY } from '../services/auth'

export const SignOut = () => {
  const token = useStorage(TOKEN_STORAGE_KEY)
  if ( !token ) return null

  return (
    <div className="absolute top-0 right-0 px-5 py-5">
      <span className="inline-flex rounded-md shadow-sm">
        <button
          onClick={() => signOut()}
          type="button"
          className="inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs leading-4 font-medium rounded text-white bg-transparent focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 opacity-75 hover:opacity-100">
          Sign out
        </button>
      </span>
    </div>
  )
}