"use client";

import { Nunito } from "next/font/google";
import { useState } from "react";
import Link from "next/link";

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

export default function Login() {
  const [userName, setUserName] = useState("Stroop");
  const [pin, setPin] = useState("");
  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>

      <div className="mb-12 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>
        <form className="flex flex-col items-center justify-center gap-4">
          <input
            className="w-full rounded border border-white px-4 py-2 font-bold text-white/70 focus:border-yellow-500 focus:outline-2 focus:outline-yellow-500"
            type="text"
            placeholder="Game PIN"
            value={pin}
            onChange={(e) => setPin(e.target.value.toUpperCase())}
          />
          <Link
            href="/lobby"
            className="w-full rounded bg-blue-500 px-4 py-2 text-center font-bold text-white hover:bg-blue-400"
          >
            Join
          </Link>
        </form>
      </div>
      <div></div>
    </main>
  );
}
