import { Background } from '@/components/background';
import { useIsMobile } from '@/hooks/use-mobile';
import { useLocation } from '@tanstack/react-router';
import type { ReactNode } from 'react';
import { Header } from './header';

interface LayoutProps {
  children: ReactNode;
}

export function Layout({ children }: LayoutProps) {
  const isMobile = useIsMobile();
  const location = useLocation();
  const isMobileHome = isMobile && location.pathname === '/';

  return (
    <div className="relative min-h-dvh overflow-x-hidden bg-background text-foreground">
      <Background />
      {!isMobileHome && <Header />}
      <main
        className={
          isMobileHome
            ? 'relative z-10 mx-auto w-full max-w-7xl'
            : 'relative z-10 mx-auto w-full max-w-7xl px-3 py-6 sm:px-6 lg:px-8'
        }
      >
        {children}
      </main>
    </div>
  );
}