import { headers as nextHeaders } from 'next/headers'
import { getPayload } from 'payload'
import configPromise from '@payload-config'
import { redirect } from 'next/navigation'
import Image from 'next/image'
import { ForgotPasswordForm } from '@/components/ForgotPasswordForm'

const LoginPage = async () => {
  const payload = await getPayload({ config: configPromise })
  const headers = await nextHeaders()
  const userResult = await payload.auth({ headers })
  if (Boolean(userResult.user)) redirect('/profile')

  return (
    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10 rounded-md">
      <div className="flex w-full max-w-sm flex-col gap-6">
        <a
          href="https://beitzah.net?ref=midrashim"
          className="flex items-center gap-2 self-center font-medium"
        >
          <div className="flex h-10 w-10 items-center justify-center rounded-md bg-primary text-primary-foreground">
            <Image
              src="https://cdn.beitzah.net/egg-highlight-white.svg"
              className="h-full"
              height={46}
              width={20}
              alt="beitzah logo"
            />
          </div>
          <div>
            <span className="block leading-3.5">Developed with 💜</span>
            <span className="block leading-3.5">by Beitzah.tech</span>
          </div>
        </a>
        <ForgotPasswordForm />
      </div>
    </div>
  )
}

export default LoginPage