import type { Metadata } from 'next'

import React from 'react'
import Image from 'next/image'

import SessionProviders from '@/components/providers/SessionProviders'
import { withBasePath } from '@/constants/images'
import { texts } from '@/texts'

// Login/signup — already disallowed in robots.ts; noindex is defense in
// depth against the URL surfacing blank in search results if ever linked.
export const metadata: Metadata = {
  robots: { index: false, follow: false },
}

const authHeroSrc = withBasePath('/images/auth-v2.png')
const logoSrc = withBasePath('/logo.svg')

const AuthLayout = ({ children }: { children: React.ReactNode }) => {
  return (
    <SessionProviders>
      <section className="consumer-mobile-viewport relative min-h-[100dvh] overflow-hidden bg-background-primary">
        <div
          aria-hidden
          className="absolute inset-0 bg-cover bg-center bg-no-repeat"
          style={{ backgroundImage: `url(${authHeroSrc})` }}
        />
        <div
          aria-hidden
          className="absolute inset-0 bg-black/20 backdrop-blur-md"
        />

        <div className="relative z-10 flex min-h-[100dvh] items-center justify-center p-4">
          <div className="flex w-full max-w-md flex-col rounded-2xl bg-white/90 p-4 backdrop-blur-sm">
            <div className="flex min-h-[400px] flex-1 flex-col items-center justify-center">
              <Image
                priority
                alt={texts.auth.logoAlt}
                className="mb-8 size-32"
                height={200}
                src={logoSrc}
                width={200}
              />
              {children}
            </div>
          </div>
        </div>
      </section>
    </SessionProviders>
  )
}

export default AuthLayout