import { Button, Text } from '@junwon/aesthetics'
import { useRouterContext } from '../providers/RouterProvider'
import { useVisa } from '../providers/VisaProvider'
import { ConfirmDialog } from './ConfirmDialog'

export function SignOutButton() {
  const { setRoute } = useRouterContext()
  const { profile, signOut } = useVisa()

  const handleSignOut = async () => {
    setRoute('/')
    signOut()
  }

  return (
    <ConfirmDialog
      onConfirm={handleSignOut}
      trigger={
        <Button>
          <Text>Sign Out</Text>
        </Button>
      }
      title="Sign Out"
      description={`Are you sure you want to sign out from ${profile.email}?`}
      confirmText="Sign Out"
    />
  )
}