// The centered auth card every page renders inside — brand, title, the form
// (children), an optional message, a footer link row, and the locale switcher.
import type { ReactNode } from 'react'
import { T, useLocale, useT } from '@voltro/i18n'
import { LocaleSwitcher } from '@voltro/ui-shadcn'
import { APP_NAME } from '../config'

const LOCALES = [
  { code: 'en', label: 'English' },
  { code: 'de', label: 'Deutsch' },
]

export interface AuthShellProps {
  readonly titleId: string
  readonly children: ReactNode
  readonly footer?: ReactNode
}

export function AuthShell({ titleId, children, footer }: AuthShellProps): ReactNode {
  const locale = useLocale()
  const langLabel = useT('lang.label')
  return (
    <div className="auth-wrap">
      <div className="auth-card">
        <div className="auth-head">
          <span className="brand">{APP_NAME}</span>
          <LocaleSwitcher locales={LOCALES} current={locale} ariaLabel={langLabel} />
        </div>
        <h1><T id={titleId} /></h1>
        {children}
        {footer ? <div className="auth-footer">{footer}</div> : null}
      </div>
    </div>
  )
}