'use client'

import { localizedModePath, modeFromPathname, type Locale } from '@/lib/localization/config'
import Image from 'next/image'
import { usePathname } from 'next/navigation'
import type { ReactNode } from 'react'
import styles from './AuthShell.module.css'

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

export function AuthShell({ locale, title, subtitle, children }: AuthShellProps) {
  const mode = modeFromPathname(usePathname())
  return (
    <main
      id="main-content"
      tabIndex={-1}
      className={styles.main}
    >
      <div className={styles.container}>
        <div className={styles.header}>
          <a href={localizedModePath('home', locale, mode)}>
            <Image
              src="/rentaldrivego.png"
              alt="RentalDriveGo"
              width={96}
              height={96}
              priority
              unoptimized
              className={styles.logo}
            />
          </a>
          <h1 className={styles.title}>
            {title}
          </h1>
          {subtitle ? (
            <p className={styles.subtitle}>
              {subtitle}
            </p>
          ) : null}
        </div>

        <section className={styles.panel}>
          {children}
        </section>
      </div>
    </main>
  )
}