import { LanguageSwitcher } from '@/components/layout/language-switcher';
import { ThemeSwitcher } from '@/components/layout/theme-switcher';
import { Button } from '@/components/ui/button';
import { Home } from 'lucide-react';
import { Link } from '@tanstack/react-router';
import { DEFAULT_NON_LOGGED_IN_ROUTE } from '@/lib/routes';

export function AuthLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className='flex h-screen items-center justify-center bg-background relative'>
      <div className='absolute top-4 left-4'>
        <Link to={DEFAULT_NON_LOGGED_IN_ROUTE}>
          <Button
            variant='outline'
            size='icon'
            aria-label='Go to home'>
            <Home className='h-4 w-4' />
          </Button>
        </Link>
      </div>
      <div className='absolute top-4 right-4 flex gap-2'>
        <ThemeSwitcher />
        <LanguageSwitcher />
      </div>
      <div className='w-full max-w-md p-8'>{children}</div>
    </div>
  );
}