'use strict'
'use client'

import LoginButton from "@/components/LoginButton"
import { signIn, signOut, useSession } from "next-auth/react"
import Image from "next/image"
import toast from "react-hot-toast"
import Loading from "./loading"

function Home(): JSX.Element {
    const { status } = useSession()

    if (status === 'loading') {
        return <Loading />
    }

    if (status === 'unauthenticated') {
        return (
            <>
                <h1 className="m-auto mt-40 text-center text-4xl">Hello, World!</h1>
                <div className="flex flex-col justify-center items-center mt-10">
                    <LoginButton onClick={() => {
                        toast.promise(signIn('github'), {
                            loading: 'Connecting...',
                            success: 'Connected!',
                            error: 'Something went wrong.'
                        })
                    }}>
                        Login with
                        <Image alt="GitHub Logo" width={15} height={15} src="/GitHub_logo.svg" />
                    </LoginButton>
                </div>
            </>
        )
    }

    return (
        <>
            <h1 className="m-auto mt-40 text-center text-4xl">Logged!</h1>
            <LoginButton onClick={() => {
                toast.promise(signOut(), {
                    loading: 'Disconnecting...',
                    success: 'Disconnected!',
                    error: 'Something went wrong.'
                })
            }}>
                Sign Out
            </LoginButton>
        </>
    )
}

export default Home

First: The 'Connected!' will be prompted even if there is an error.
Second: The 'Disconnected!' will never be prompted may be cause to the refreshing but I think if I find a way to execute it in CSR (like useEffect) it would be ok