import { signIn } from "@/auth";
import { Wordmark } from "@/components/wordmark";

export default function LoginPage() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center px-4">
      <div className="flex w-full max-w-sm flex-col items-center gap-7 rounded-2xl border border-white/10 bg-surface/55 p-8 shadow-lg shadow-black/10 backdrop-blur-md">
        <div className="flex flex-col items-center gap-4">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src="/logo-bars.svg" alt="" width={51} height={48} className="h-12 w-auto" />
          <Wordmark className="text-3xl" />
          <p className="text-center text-sm text-fg/50">
            Książka Notowań Udźwigów i Rezultatów
          </p>
        </div>

        <form
          className="w-full"
          action={async () => {
            "use server";
            await signIn("keycloak", { redirectTo: "/" });
          }}
        >
          <button type="submit" className="btn btn-primary w-full px-8 py-3 text-base">
            Zaloguj
          </button>
        </form>
      </div>
    </div>
  );
}