"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 p-24 bg-orange-200">
      <h1 className={`${vollkorn.className} text-[42px]`}>Nominaties</h1>

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

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

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