"use client";
import { useState } from "react";
import { Vollkorn } from "next/font/google";

const vollkorn = Vollkorn({
  weight: "600",
  subsets: ["latin"],
});

export default function Nominations() {
  const [songURL, setSongURL] = useState("");

  return (
    <main className="flex min-h-screen flex-col items-center justify-between bg-orange-200 p-24">
      <h1 className={`${vollkorn.className} text text-[42px]`}>Nominaties</h1>

      <form className="flex flex-col items-center justify-between">
        <label className="w-lg mb-2 block text-sm font-bold text-gray-700">
          Dump hier je Spotify-link:
          <input
            className="w-full appearance-none rounded border bg-red-50 px-3 py-2 text-gray-700 opacity-70 shadow focus:outline-none"
            type="text"
            placeholder="Spotify URL"
            value={songURL}
            onChange={(e) => setSongURL(e.target.value)}
          />
        </label>

        <button
          className="rounded bg-[#2f363c] px-4 py-2 font-bold text-white hover:bg-slate-700"
          type="submit"
          onClick={(e) => {
            e.preventDefault();
            console.log("Zojuist genomineerd:", songURL);
          }}
        >
          Nomineer
        </button>
      </form>

      <footer>
        <p>© 2020-2025 Hoestende Draken PartyCo</p>
      </footer>
    </main>
  );
}
