import { auth, signIn, signOut } from "@/auth"

export default async function Home() {
  const session = await auth()

  return (
    <div className="flex min-h-screen items-center justify-center bg-zinc-50 dark:bg-black">
      <main className="flex flex-col items-center gap-6 rounded-2xl bg-white px-12 py-10 shadow-sm dark:bg-zinc-900">
        {session ? (
          <>
            <p className="text-2xl font-semibold text-zinc-900 dark:text-zinc-50">
              Hello, {session.user?.name}!
            </p>
            <form
              action={async () => {
                "use server"
                await signOut({ redirectTo: "/" })
              }}
            >
              <button
                type="submit"
                className="rounded-full bg-zinc-900 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300"
              >
                Logout
              </button>
            </form>
          </>
        ) : (
          <form
            action={async () => {
              "use server"
              await signIn("zitadel")
            }}
          >
            <button
              type="submit"
              className="rounded-full bg-zinc-900 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300"
            >
              Login
            </button>
          </form>
        )}
      </main>
    </div>
  )
}