import DevMagicLink from './DevMagicLink'
import BrandName from '@/app/BrandName'

export default async function VerifyPage({
  searchParams,
}: {
  searchParams: Promise<{ email?: string }>
}) {
  const { email } = await searchParams
  const isDevMode = process.env.AUTH_DEV_EMAIL_MODE === 'dev-link'

  return (
    <main className="flex min-h-screen items-center justify-center bg-zinc-50 px-4 text-zinc-950 dark:bg-zinc-950 dark:text-zinc-100">
      <div className="w-full max-w-sm rounded-lg border border-zinc-200 bg-white p-8 text-center shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <p className="mb-4 text-xs">
          <BrandName />
        </p>
        <h1 className="mb-2 text-xl font-semibold text-zinc-950 dark:text-white">Check your email</h1>
        <p className="text-sm text-zinc-600 dark:text-zinc-400">
          A sign-in link has been sent to your email address. Click it to continue.
        </p>
        {isDevMode && <DevMagicLink email={email ?? null} />}
      </div>
    </main>
  )
}