import Head from 'next/head'
import styles from '../styles/Home.module.css'

import React, { useState, useEffect } from 'react';

import MetaMask from './components/Metamask';
import WalletConnectLogin from './components/WalletConnect';

import { signIn, signOut, useSession } from 'next-auth/client'

export default function Home({infura}) {

  //infura
  const [session] = useSession();

  
  const handleSignOut = () => {
      
    signOut();
  }

  return (
    <div className={styles.container}>
      <Head>
        <title>Auth0 - Ethereum Login</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        
        <MetaMask session={session} signIn={signIn}/>

        <WalletConnectLogin session={session} infura={infura} signIn={signIn}/>

        {session && <p className={styles.description}> Welcome {session?.user?.name}</p>}

        {session && <p className={styles.description}> <button onClick={handleSignOut} className={styles.button}>Logout</button></p>}

      </main>

      <footer className={styles.footer}>
        
      </footer>
    </div>
  )
}

export async function getStaticProps() {
  
  return {
    props: {
      infura: process.env.INFURA_ID
    },
  }
}
