import type { ReactNode } from 'react';
import { AppShell } from '@/components/app-shell';
import { LanguageSwitcher } from '@/components/language-switcher';
import { OfflineSync } from '@/components/offline-sync';
import { PwaProvider } from '@/components/pwa-provider';
import { Link } from '@/i18n/navigation';
import { useT } from '@/i18n/t';

export default function AppLayout({ children }: { children: ReactNode }) {
  const t = useT();
  return (
    <div className="mx-auto flex min-h-dvh w-full max-w-2xl flex-col">
      <header className="flex items-center justify-between px-5 py-4">
        <Link href="/inicio" className="text-base font-semibold tracking-tight">
          {t('common.appName')}
        </Link>
        <div className="flex items-center gap-4">
          <LanguageSwitcher />
          <Link href="/perfil" className="text-sm font-medium text-accent-700 hover:underline">
            {t('profile.title')}
          </Link>
        </div>
      </header>
      {/* Bottom padding clears the tab bar and the scan button above it. */}
      <main className="flex-1 px-5 pb-36">{children}</main>
      <AppShell />
      <OfflineSync />
      <PwaProvider />
    </div>
  );
}