import type { Metadata } from "next";
import { Brand } from "@/components/brand/Brand";
import { ConfirmResetForm } from "./ConfirmResetForm";

export const metadata: Metadata = { title: "Neues Passwort" };

export default async function ResetConfirmPage({
  params,
}: {
  params: Promise<{ token: string }>;
}) {
  const { token } = await params;

  return (
    <div className="card animate-in" style={{ padding: "clamp(28px, 4vw, 48px)" }}>
      <div className="flex flex-col items-center text-center gap-5">
        <Brand size={46} />
        <div className="flex flex-col gap-2">
          <span className="eyebrow justify-center">Neues Passwort</span>
          <h1>Passwort festlegen</h1>
          <p className="text-muted text-sm max-w-[36ch] mx-auto">
            Wähle ein sicheres neues Passwort für dein Avaria-Team-OS-Konto.
          </p>
        </div>
      </div>

      <div className="mt-7">
        <ConfirmResetForm token={token} />
      </div>
    </div>
  );
}