mcs-lose/frontend/src/components/MainForm.tsx

import React from "react";
import { registerLos } from "../utils/register";
import { toast } from "react-toastify";

const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  const formData = new FormData(event.currentTarget);
  const data = Object.fromEntries(formData.entries());
  toast.promise(registerLos(data), {
    pending: "Registriere Los...",
  });
};

const MainForm: React.FC = () => {
  return (
    <section className="mx-auto mt-10 w-full max-w-lg rounded-3xl border border-black/10 bg-zinc-200/90 p-6 shadow-lg backdrop-blur-sm">
      <h2 className="text-2xl font-black text-zinc-900">Los registrieren</h2>
      <p className="mt-1 text-xs text-zinc-500">
        * alle Informationen werden benötigt
      </p>

      <form onSubmit={handleSubmit} className="mt-5 space-y-4">
        <div className="space-y-1">
          <label
            htmlFor="losnummer"
            className="text-sm font-medium text-zinc-800"
          >
            Losnummer:
          </label>
          <input
            type="text"
            id="losnummer"
            name="losnummer"
            placeholder="XXXX-XXXX-XXXX-XXXX"
            required
            className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none ring-0 transition focus:border-black/40 focus:ring-2 focus:ring-black/10"
          />
        </div>

        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          <div className="space-y-1">
            <label
              htmlFor="vorname"
              className="text-sm font-medium text-zinc-800"
            >
              Vorname:
            </label>
            <input
              type="text"
              id="vorname"
              name="vorname"
              placeholder="Max"
              required
              className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"
            />
          </div>

          <div className="space-y-1">
            <label
              htmlFor="nachname"
              className="text-sm font-medium text-zinc-800"
            >
              Nachname:
            </label>
            <input
              type="text"
              id="nachname"
              name="nachname"
              placeholder="Mustermann"
              required
              className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"
            />
          </div>
        </div>

        <div className="space-y-1">
          <label
            htmlFor="adresse"
            className="text-sm font-medium text-zinc-800"
          >
            Straße + Haus Nr.:
          </label>
          <input
            type="text"
            id="adresse"
            name="adresse"
            placeholder="Musterstraße 1"
            required
            className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"
          />
        </div>

        <div className="space-y-1">
          <label htmlFor="plz" className="text-sm font-medium text-zinc-800">
            Postleitzahl + Ort:
          </label>
          <input
            type="text"
            id="plz"
            name="plz"
            placeholder="12345 Musterstadt"
            required
            className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"
          />
        </div>

        <div className="space-y-1">
          <label htmlFor="email" className="text-sm font-medium text-zinc-800">
            E-Mail:
          </label>
          <input
            type="email"
            id="email"
            name="email"
            placeholder="max@mustermann.de"
            required
            className="w-full rounded-xl border border-black/25 bg-white/80 px-4 py-2.5 text-sm text-zinc-800 placeholder-zinc-400 shadow-inner outline-none focus:border-black/40 focus:ring-2 focus:ring-black/10"
          />
        </div>

        <button
          type="submit"
          className="mt-2 w-full rounded-xl bg-blue-600 px-4 py-3 text-base font-bold text-white shadow transition hover:bg-blue-700 active:bg-blue-800"
        >
          Los registrieren
        </button>
        <p className="mt-1 text-xs text-zinc-500">
          Wenn Sie die Daten eines Loses bearbeiten möchten,{" "}
          <a
            className="text-blue-600 underline"
            href="mailto:example@example.com"
          >
            kontaktieren Sie uns
          </a>
          .
        </p>
      </form>
    </section>
  );
};

export default MainForm;