import { Suspense } from 'react'
import { getTranslations, setRequestLocale } from 'next-intl/server'
import { PageHero } from '@/components/page-hero'
import { LoginForm } from '@/components/auth/login-form'
import { locales, type Locale } from '@/i18n/config'
import { getStaticSiteSettings } from '@/lib/site-settings'

type PageProps = { params: Promise<{ locale: string }> }

export function generateStaticParams() {
  return locales.map((locale) => ({ locale }))
}

export default async function LoginPage({ params }: PageProps) {
  const { locale } = await params
  setRequestLocale(locale as Locale)

  const t = await getTranslations('auth.login')
  const site = getStaticSiteSettings()

  return (
    <main>
      <PageHero
        eyebrow={site.shortName}
        title={t('hero.title')}
        description={t('hero.description', { name: site.shortName })}
      />

      <section className="section-padding">
        <div className="container-wide max-w-lg">
          <Suspense
            fallback={
              <div className="flex min-h-[20rem] items-center justify-center text-muted-foreground">
                {t('loading')}
              </div>
            }
          >
            <LoginForm />
          </Suspense>
        </div>
      </section>
    </main>
  )
}