import type { ReactNode } from 'react';
import { LanguageSwitcher } from '@/components/language-switcher';
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>
      <main className="flex-1 px-5 pb-16">{children}</main>
    </div>
  );
}