import { Suspense } from "react"
import { Wordmark } from "@/components/wordmark"
import { VerifyEmailForm } from "@/components/verify-email-form"

export default function VerifyEmailPage() {
  return (
    <main className="flex min-h-[100dvh] flex-col items-center justify-center bg-background px-5 py-10">
      <div className="flex w-full max-w-sm flex-col gap-8">
        <header className="flex flex-col items-center gap-3 text-center">
          <Wordmark />
        </header>

        <Suspense
          fallback={
            <div className="flex w-full flex-col items-center gap-4 rounded-3xl border border-border bg-card p-8 text-center shadow-lg shadow-black/5">
              <div
                aria-hidden="true"
                className="size-10 animate-spin rounded-full border-4 border-primary/20 border-t-primary"
              />
            </div>
          }
        >
          <VerifyEmailForm />
        </Suspense>
      </div>
    </main>
  )
}