// Root layout — nav + globals. These pages hydrate fully (the default for
// ssr/isr), so internal <a> links do client-side navigation (the Router
// intercepts them) after the first load.
//
// The app is bilingual (see `locales` in app.config.ts): nav labels come from
// the catalog via `<T>`, and <LocaleSwitcher> writes the `voltro:locale` cookie
// + reloads so the framework re-renders in the chosen language.

import type { ReactNode } from 'react'
import { T, useLocale, useT } from '@voltro/i18n'
import { LocaleSwitcher } from '@voltro/ui-shadcn'
import '../globals.css'

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

export default function Layout({ children }: { readonly children: ReactNode }): ReactNode {
  const locale = useLocale()
  const langLabel = useT('lang.label')
  return (
    <>
      <nav className="top">
        {/* Plain <a> — the Router intercepts internal anchors for SPA nav (no
            full reload), same as the reference templates. */}
        <a href="/"><T id="nav.ssr" /></a>
        <a href="/feed"><T id="nav.isr" /></a>
        <a href="/feed-swr"><T id="nav.swr" /></a>
        <span style={{ marginLeft: 'auto' }}>
          <LocaleSwitcher locales={LOCALES} current={locale} ariaLabel={langLabel} />
        </span>
      </nav>
      <main>{children}</main>
    </>
  )
}