'use client'

import { localizedPath, type Locale } from '@/lib/localization/config'
import Image from 'next/image'
import type { ReactNode } from 'react'

interface AuthShellProps {
  locale: Locale
  title: string
  subtitle?: string
  children: ReactNode
}

export function AuthShell({ locale, title, subtitle, children }: AuthShellProps) {
  return (
    <main
      id="main-content"
      tabIndex={-1}
      style={{
        display: 'flex',
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        padding: '2rem 1rem',
        minHeight: 'calc(100vh - 80px)',
      }}
    >
      <div style={{ width: '100%', maxWidth: '28rem' }}>
        <div style={{ marginBottom: '2rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <a href={localizedPath('home', locale)}>
            <Image
              src="/rentaldrivego.png"
              alt="RentalDriveGo"
              width={96}
              height={96}
              priority
              unoptimized
              style={{
                display: 'block',
                borderRadius: '1.5rem',
                border: '1px solid var(--color-border)',
                background: 'var(--color-surface)',
                padding: '0.375rem',
                boxShadow: '0 1px 3px rgba(0,0,0,0.08)',
              }}
            />
          </a>
          <h1
            style={{
              marginTop: '0.5rem',
              fontSize: '1.75rem',
              fontWeight: 800,
              letterSpacing: '-0.03em',
              color: 'var(--color-heading)',
            }}
          >
            {title}
          </h1>
          {subtitle ? (
            <p
              style={{
                marginTop: '0.5rem',
                fontSize: '0.875rem',
                color: 'var(--color-text-secondary)',
              }}
            >
              {subtitle}
            </p>
          ) : null}
        </div>

        <section
          style={{
            borderRadius: '2rem',
            border: '1px solid var(--color-border)',
            background: 'var(--color-surface)',
            padding: '2rem',
            boxShadow: '0 30px 80px rgba(28,25,23,0.06)',
          }}
        >
          {children}
        </section>
      </div>
    </main>
  )
}
