import type { ReactNode } from 'react'
import { ThemeSwitch, useTheme } from '@/features/theme-toggle'
import { t } from '@/shared/i18n'
import { LegalLink } from '@/shared/ui'

export function AppShell({ children }: { children: ReactNode }) {
  const theme = useTheme()
  return (
    <div className="flex min-h-dvh flex-col bg-page px-4 pt-6 pb-[max(28px,env(safe-area-inset-bottom))] text-ink md:px-12 md:pt-10 md:pb-8 lg:px-16 lg:pt-12 lg:pb-10">
      <header className="flex h-10 shrink-0 items-center justify-between">
        {/* MPA：品牌入口整页回到落地页，不交给认证应用的客户端路由。 */}
        <a href="/" className="inline-flex min-h-11 items-center gap-2.75" aria-label={t('shell.home')}>
          <img src="/media/gitdataai-red-panda.png" width={40} height={40} alt="" />
          <span className="font-latin text-[19px] font-semibold tracking-[-0.4px]">GitDataAI</span>
        </a>
        <ThemeSwitch model={theme} />
      </header>
      <main id="main" className="flex flex-1 flex-col items-center justify-center py-6 md:py-8">
        <section className="w-full max-w-[400px]">{children}</section>
      </main>
      <footer className="flex shrink-0 flex-wrap items-center justify-center gap-x-3 text-xs leading-normal text-muted">
        <LegalLink kind="terms" />
        <LegalLink kind="privacy" />
        <span className="font-latin">© 2026 GitDataAI</span>
      </footer>
    </div>
  )
}