import { type ReactNode } from 'react';
import { useLocation } from 'react-router-dom';
import { Header } from './Header';
import { Footer } from './Footer';
import { ScrollToTop } from './ScrollToTop';
import { cn } from '../../lib/cn';

type LayoutProps = {
  children: ReactNode;
};

export const Layout = ({ children }: LayoutProps) => {
  const { pathname } = useLocation();
  const isHome = pathname === '/';
  const darkRoutes = ['/about', '/technology', '/usecases'];
  const isDarkPage = darkRoutes.some((route) => pathname.startsWith(route));

  return (
    <div
      className={cn(
        'relative min-h-screen',
        isDarkPage ? 'bg-black text-slate-100' : 'bg-mist text-ink',
        !isHome && 'overflow-hidden',
      )}
    >
      <ScrollToTop />
      <Header />
      <main
        className={cn(
          'relative z-10',
          isHome
            ? 'h-screen overflow-x-hidden overflow-y-scroll scroll-smooth snap-y snap-mandatory'
            : 'mx-auto max-w-6xl px-6 pb-24 pt-28 lg:px-8 lg:pt-32',
        )}
      >
        {children}
      </main>
      {!isHome && <Footer />}
    </div>
  );
};