import { BackLink } from "@/components/back-link";
import { Button } from "@/components/ui";
import { AdminField, AdminFormPanel, AdminSelect } from "@/components/admin-form";
import { createCustomerAction } from "../../actions";
import { getLocale } from "@/i18n/locale";
import { getDictionary } from "@/i18n/get-dictionary";

export default async function AdminBenutzerNewPage() {
  const t = getDictionary(await getLocale());
  const tu = t.adminUserNewPage;

  return (
    <div className="max-w-xl">
      <BackLink href="/admin/benutzer" label={tu.backToUsers} />
      <h1 className="text-2xl text-forest mb-2">{tu.title}</h1>
      <p className="text-sm text-ink/70 mb-8">{tu.intro}</p>

      <AdminFormPanel action={createCustomerAction} actions={<Button type="submit">{tu.createAndSend}</Button>}>
        <div className="space-y-4">
          <div className="grid grid-cols-2 items-end gap-4">
            <AdminField name="firstName" label={tu.firstNameLabel} required />
            <AdminField name="lastName" label={tu.lastNameLabel} required />
          </div>
          <AdminField name="email" label={tu.emailLabel} type="email" required />
          <AdminSelect name="role" label={tu.roleLabel} defaultValue="KUNDE">
            <option value="KUNDE">{tu.roleCustomer}</option>
            <option value="ADMIN">{tu.roleAdmin}</option>
          </AdminSelect>
        </div>
      </AdminFormPanel>
    </div>
  );
}