"use client";

import Image from "next/image";
import Link from "next/link";
import { Log } from "oidc-client-ts";
import { useAuth } from "react-oidc-context";
import { Nunito } from "next/font/google";
import { use, useState } from "react";

Log.setLogger(console);
const nunito = Nunito({
  weight: "900",
  subsets: ["latin"],
});

export default function Page() {
  const [userName, setUserName] = useState("Stroop");
  const auth = useAuth();
  console.log(auth);

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div>
        <h1
          className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
        >
          LOGIN
        </h1>
      </div>
      {auth.isAuthenticated && (
        <h2
          className={`${nunito.className} text-outline mb-16 text-[32px] tracking-tighter text-yellow-500`}
        >
          Hallo je bent nu ingelogd.
        </h2>
      )}
      {!auth.isAuthenticated && (
        <div className="mb-15 flex flex-col items-center justify-between gap-4 rounded-md bg-blue-950/80 p-8">
          <p className="text-2xl font-semibold text-white drop-shadow-sm drop-shadow-gray-900">
            Welkom, {userName}!
          </p>

          <button
            className="w-full rounded bg-blue-500 px-4 py-2 text-center font-bold text-white hover:bg-blue-400"
            onClick={() => void auth.signinRedirect()}
          >
            Inloggen
          </button>
        </div>
      )}

      <div></div>
    </main>
  );
}