import { Suspense } from 'react'
import LoginForm from './LoginForm'
import PasswordResetModal from '@/components/PasswordResetModal'

export default function LoginPage() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-zinc-50 px-4 dark:bg-zinc-950">
      <Suspense
        fallback={
          <div className="w-full max-w-md space-y-8 text-center">
            <h1 className="text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
              WebVNWrite
            </h1>
            <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
              Loading...
            </p>
          </div>
        }
      >
        <LoginForm />
      </Suspense>
      <PasswordResetModal />
    </div>
  )
}