// Layout for the SILENT route group `(marketing)/`. The parens mean the
// directory name never appears in a URL — the pages inside are `/` and
// `/login`. Gives the public pages a header distinct from the admin sidebar.
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 default function MarketingLayout({ children }: { readonly children: ReactNode }): ReactNode {
  const locale = useLocale()
  const langLabel = useT('lang.label')
  return (
    <div className="marketing">
      <header>
        <a className="brand" href="/">{APP_NAME}</a>
        <span className="spacer" />
        <a href="/admin"><T id="nav.admin" /></a>
        <a href="/login"><T id="nav.signIn" /></a>
        <LocaleSwitcher locales={LOCALES} current={locale} ariaLabel={langLabel} />
      </header>
      {children}
    </div>
  )
}