import { ReactNode } from 'react';
import Navbar from './Navbar';
import Footer from './Footer';
import { ScrollToTop } from './ScrollToTop';
import { ScrollProgress } from './ScrollProgress';
import { ScrollButton } from './ScrollButton';
import { PageLoader } from './PageLoader';

export function Layout({ children }: { children: ReactNode }) {
  return (
    <div className="min-h-screen flex flex-col font-sans text-foreground bg-background selection:bg-primary/20 selection:text-primary">
      <PageLoader />
      <ScrollToTop />
      <ScrollProgress />
      <Navbar />
      <main className="flex-grow flex flex-col">{children}</main>
      <Footer />
      <ScrollButton />
    </div>
  );
}